Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Sass Mixin for CSS3 Animations
@include keyframe(fadeout) {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@include keyframe(changecolour) {
0% {
color: #000;
}
100% {
color: #FFF;
}
}
@mixin keyframe ($animation_name) {
@-webkit-keyframes $animation_name {
@content;
}
@-moz-keyframes $animation_name {
@content;
}
@-o-keyframes $animation_name {
@content;
}
@keyframes $animation_name {
@content;
}
}
/*
Example usage:
@include animation(10s, 5s, changecolour)
*/
@mixin animation ($delay, $duration, $animation) {
-webkit-animation-delay: $delay;
-webkit-animation-duration: $duration;
-webkit-animation-name: $animation;
-webkit-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
-moz-animation-delay: $delay;
-moz-animation-duration: $duration;
-moz-animation-name: $animation;
-moz-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
-o-animation-delay: $delay;
-o-animation-duration: $duration;
-o-animation-name: $animation;
-o-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
animation-delay: $delay;
animation-duration: $duration;
animation-name: $animation;
animation-fill-mode: forwards; /* this prevents the animation from restarting! */
}
@awesomephant

This comment has been minimized.

Copy link

commented Oct 4, 2013

You don't need the -o- prefix here. There was literally never a browser that used it. http://caniuse.com/#feat=css-animation

@VAggrippino

This comment has been minimized.

Copy link

commented Dec 18, 2013

The generated CSS will have all of the prefixed animation properties duplicated in all of the keyframes blocks. For example, @-webkit-keyframes will contain -moz-animation-* properties and @-moz-keyframes will contain -webkit-animation-*. I'm sure that works, but I wonder if there's a creative way to avoid that duplication.

@aaron-album

This comment has been minimized.

Copy link

commented Dec 23, 2013

@awesomephant opera 12 used -o- in the same page referenced http://caniuse.com/#feat=css-animation

@aaron-album

This comment has been minimized.

Copy link

commented Dec 23, 2013

@Ghodmode The animation include is not supposed to be placed in the keyframes mixin so we shouldn't see the problem you describe.

Nonetheless, any calls like @include transform(rotate(90deg)); within the keyframes mixing will show up with all the prefixes. That's unfortunate.

@mds

This comment has been minimized.

Copy link

commented Jan 16, 2014

Trying to use this here http://sassmeister.com/gist/8458511 but $animation-name isn't compiling properly. Any ideas?

@mds

This comment has been minimized.

Copy link

commented Jan 16, 2014

Figured it out. With Sass you have to use #{$animation-name} to force the correct output

@smuuf

This comment has been minimized.

Copy link

commented Jul 1, 2014

mds: Geez, Thank you! I've been searching for this one (#{$animation-name}) for the last hour.

@shoxty

This comment has been minimized.

Copy link

commented May 26, 2015

<3 this. thanks.

@terrancesmith98

This comment has been minimized.

Copy link

commented Apr 22, 2016

Why not let something like gulp-autoprefixer do the prefixing heavy-lifting for you and only insert the basic properties into the mixin?

@thrillcode

This comment has been minimized.

Copy link

commented Jan 5, 2017

I know this is a pretty old res, though it's missing animation-iteration-count, eg. use of infinite

@mrengy

This comment has been minimized.

Copy link

commented Dec 2, 2017

I was having an error with this outputting the literal $animation_name into the CSS. The accepted answer to this StackOverflow question resolved it for me. You might consider incorporating it into the gist.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.