Animation and Keyframes Mixins

animation-keyframes-mixins.sass

@mixin keyframes($name) {
  @-o-keyframes $name { @content };
  @-moz-keyframes $name { @content };
  @-webkit-keyframes $name { @content }; 
  @-keyframes $name { @content };
}
@mixin animation-name($name...) {
  -o-animation-name: $name;
  -moz-animation-name: $name;
  -webkit-animation-name: $name;
  animation-name: $name;
}
@mixin animation-duration($duration...) {
  -o-animation-duration: $duration;
  -moz-animation-duration: $duration;
  -webkit-animation-duration: $duration;
  animation-duration: $duration;
}
@mixin animation-duration($duration...) {
  -o-animation-duration: $duration;
  -moz-animation-duration: $duration;
  -webkit-animation-duration: $duration;
  animation-duration: $duration;
}
@mixin animation-timing-function($timing...) {
  -o-animation-timing-function: $timing;
  -moz-animation-timing-function: $timing;
  -webkit-animation-timing-function: $timing;
  animation-timing-function: $timing;
}
@mixin animation-iteration-count($count...) {
  -o-animation-iteration-count: $count;
  -moz-animation-iteration-count: $count;
  -webkit-animation-iteration-count: $count;
  animation-iteration-count: $count;
}
@mixin animation-direction($direction...) {
  -o-animation-direction: $direction;
  -moz-animation-direction: $direction;
  -webkit-animation-direction: $direction;
  animation-direction: $direction;
}
@mixin animation-fill-mode($fill...) {
  -o-animation-fill-mode: $fill;
  -moz-animation-fill-mode: $fill;
  -webkit-animation-fill-mode: $fill;
  animation-fill-mode: $fill;
}
@mixin animation-play-state($state...) {
  -o-animation-play-state: $state;
  -moz-animation-play-state: $state;
  -webkit-animation-play-state: $state;
  animation-play-state: $state;
}
@mixin animation($animation...) {
  -o-animation: $animation;
  -moz-animation: $animation;
  -webkit-animation: $animation;
  animation: $animation;
}


@include keyframes(grow) {
    from {
      -webkit-transform: scale(1);
    } 
    to {
      -webkit-transform: scale(2);
    }
  }
@include keyframes(fadeIn) {
    from {
      opacity:0;
    } 
    to {
      opacity:1;
    }
  }

.spinner {
  @include animation-name(grow, fadeIn);
  @include animation-duration(1s);
  @include animation-iteration-count(infinite);
  @include animation-direction(alternate);
  background-color: blue;
  position: absolute;
  top: 25%;
  left: 25%;
  right: 25%;
  bottom: 25%;
}