animate/keyframes/transition helper mixins

_animate.scss

// Mixin for keyframes
// basic usage:
// @include keyframes(name) {
//   0% { background: yellow; }
//   100% { background: blue; }
// }

@mixin keyframes($name) {
  @-webkit-keyframes  $name { @content; }
  @-moz-keyframes     $name { @content; }
  @keyframes          $name { @content; }
}

// Mixin for calling an animation
// basic usage:
// @include animation(animation .5s ease-in-out);

@mixin animation($animation...) {
  @include prefix(animation, $animation...);
}

// Mixin for calling an transition
// basic usage:
// @include transition(all .25s ease-in-out);

@mixin transition($transition...) {
  @include prefix(transition, $transition...);
}