SCSS Keyframe Mixin
Easily vendor-prefix your keyframes with this SCSS mixin.
@mixin keyframes( $animationName )
{
@-webkit-keyframes $animationName {
@content;
}
@-moz-keyframes $animationName {
@content;
}
@-o-keyframes $animationName {
@content;
}
@keyframes $animationName {
@content;
}
}
Example:
@include keyframes( incrediblehulk )
{
0% {
color: #f8d2c0;
// you can also use mixins inside this mixin!
@include transform( scale(1) );
}
100% {
color: #0f0;
@include transform( scale(3) );
}
}
Note: The @content block was implemented in SASS 3.2
Written by Yoeran Luteijn
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Css3
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#