Skip to content

Instantly share code, notes, and snippets.

@jackie
Created February 24, 2015 19:24
Show Gist options
  • Save jackie/73c8f727999633dfb10c to your computer and use it in GitHub Desktop.
Save jackie/73c8f727999633dfb10c to your computer and use it in GitHub Desktop.
Sass animation keyframe mixin
//
// 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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment