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

@awesomephant awesomephant 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

@VAggrippino VAggrippino 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

@aaron-album aaron-album 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

@aaron-album aaron-album 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

@mds mds 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

@mds mds 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

@smuuf smuuf 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

@shoxty shoxty commented May 26, 2015

<3 this. thanks.

@terrancesmith98

This comment has been minimized.

Copy link

@terrancesmith98 terrancesmith98 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

@thrillcode thrillcode 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

@mrengy mrengy 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.

@afroguy16

This comment has been minimized.

Copy link

@afroguy16 afroguy16 commented May 9, 2021

I don't understand the examples or their relationship

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment