Sass animation keyframe mixin

gistfile1.sass

//
// keyframes - prints out vendor-prefixed keyframe declarations
//
// $name - the name of your animation
//
@mixin keyframes($name) {

  @-moz-keyframes #{$name} {
    @content;
  }

  @-webkit-keyframes #{$name} {
    @content;
  }

  @-ms-keyframes #{$name} {
    @content;
  }

  @-o-keyframes #{$name} {
    @content;
  }

} // @mixin keyframes

//
// fade-in - the animation values for fading in
//
@mixin fade-in {

  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
  
} // @mixin fade-in

// example:
@include keyframes(fade-in) {
  @include fade-in;
)

.my-animating-element {
  @include animation(fade-in .2s ease);
}