Mozilla 5 now support CSS3 Keyframes for animation—as does webkit.
They both require vedor specific prefixes to work.
@-webkit-keyframes name { }
@-moz-keyframes name { }
I'm trying to write the follow sass directive so that I don't have to
create duplicate keyframe rule sets:
$vendors: '@-webkit', '@-moz';
@each $vendor in $vendors {
#{$vendor}-keyframes slideup {
from {
-webkit-transform: translateY(250px);
}
to {
-webkit-transform: translateY(0px);
}
}
}
Sass 3.2 spits out the following: error sass/_directives.scss (Line
17: Invalid CSS after "": expected selector, was "@-webkit-keyfra...")
Is there a current workaround for this? It would be nice to have sass
support @keyframes.
W3C Spec:
http://www.w3.org/TR/css3-animations/