animation mixins

@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;
    }
  }

@include keyframes(fadeInOut) {
  0%   { opacity:1; }
  100%  { opacity:0; }
}