Because I keep referring back to it:
@include simple-vendor-prefix(animation,
animation-name(name [default:none])
animation-duration(Xs | Xms [default:0s])
animation-timing-function(ease | ease-in | ease-out | ease-in-out | linear | cubic-bezier(x1,y1,x2,y2) | step-start | step-end | steps(X start|end) [default:ease])
animation-delay(Xs | Xms [default:0s])
animation-iteration-count(X | infinite [default:1])
animation-direction(normal | reverse | alternate | alternate-reverse [default:normal])
animation-fill-mode(none | forwards | backwards | both [default:none])
animation-play-state(running | paused [default:running])
)
This is the Sass I use for declaring CSS animations. It's a good list of all the parameters you can get for the CSS animation
property, with their parameter format and default value.
READMORE
For this reason I keep referring back to it, just to check things like keywords for timing functions. However if you want to use it in your Sass, firstly you would need the simple-vendor-prefix
mixin:
@mixin simple-vendor-prefix($name, $argument) {
-webkit-#{$name}: $argument;
-ms-#{$name}: $argument;
-moz-#{$name}: $argument;
-o-#{$name}: $argument;
#{$name}: $argument;
}
You would also need to create your animation with @keyframes
:
@keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
Then you would declare the animation something like:
@include simple-vendor-prefix(animation, fadeIn 2s infinite);
You can include as many or as little of the above listed properties in the second part of the mixin's parameters.