Mixin for CSS Animation

animation.scss

// =========== [[CSS Animation]]  ===========

// Keyframes
// Usage:
// @include keyframes(name) {
//   0% { selector { property: value; } }
//   100% { selector { property: value; } }
// }
@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content;
  }
  @keyframes #{$name} {
    @content;
  }
}

//animation-name
// value:: none | <custom-ident>
// Usage:
// selector { 
//   @include animation-name(name);
// }
@mixin animation-name($name) {
  -webkit-animation-name: $name;
  animation-name: $name;
}

//animation-duration
// value:: time
// Usage:
// selector { 
//   @include animation-duration(1.6);
// }
@mixin animation-duration($time) {
  -webkit-animation-duration: $time + s;
  animation-duration: $time + s;
}

// animation-iteration-count
// value:: infinite | <number>
// Usage:
// selector { 
//   @include animation-iteration-count(infinite);
// }
@mixin animation-iteration-count($count) {
  -webkit-animation-iteration-count: $count;
  animation-iteration-count: $count;
}

// animation-direction
// value:: normal | reverse | alternate | alternate-reverse
// Usage:
// selector { 
//   @include animation-direction(reverse);
// }
@mixin animation-direction($direction) {
  -webkit-animation-direction: $direction;
  animation-direction: $direction;
}

// animation-timing-function
// value:: ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>)
// Usage:
// selector { 
//   @include animation-timing-function(ease-in);
// }
@mixin animation-timing-function($function) {
  -webkit-animation-timing-function: $function;
  animation-timing-function: $function;
}

// animation-delay
// value:: time
// Usage:
// selector { 
//   @include animation-delay(0.8);
// }
@mixin animation-delay($time) {
  -webkit-animation-delay: $time + s;
  animation-delay: $time + s;
}

// animation-play-state
// value:: running | paused
// Usage:
// selector { 
//   @include animation-play-state(running);
// }
@mixin animation-play-state($state) {
  -webkit-animation-delay: $state;
  animation-delay: $state;
}

// animation-fill-mode
// value:: none | forwards | backwards | both
// Usage:
// selector { 
//   @include animation-fill-mode(forwards);
// }
@mixin animation-fill-mode($mode) {
  -webkit-animation-fill-mode: $mode;
  animation-fill-mode: $mode;
}