RWojKV

index.jade

p hi there!

RWojKV.markdown

RWojKV

A Pen by Jake Zerrer on CodePen.

License.

style.scss

  /************************************************/
  /* Author: Jake Zerrer                          */
  /*                                              */
  /* Simple Mixin for creating a single instance  */
  /* of a css keyframe animation. The animation   */
  /* name is made unique to prevent namespace     */
  /* collisions.                                  */
  /*                                              */
  /* License: MIT                                 */
  /************************************************/


@mixin uniqueAnimation ($name: null, $duration: null, $timing-function: null, 
                        $delay: null, $iteration-count: null, $direction: null,
                        $fill-mode: null, $play-state: null) {
                          
    $full-name: $name + "-" + unique-id() ;
  
    @keyframes #{$full-name} {
        @content;
    }
  
    animation: $full-name $duration $timing-function $delay $iteration-count
               $direction $fill-mode $play-state;
}


/* Example of use: */
p {
    @include uniqueAnimation(jake, 3s, ease-in, 1s, infinite) {
        from {
            color: blue;
        }

        to {
            color: red;
        }
    }  
}