We've got a lot of exciting animations on the horizon and I'm on the lookout for a more streamlined solution to cater to all browsers. Something with a hint of sassiness like this would be perfect:
@each $browser in '-webkit-', '-moz-', '-o-', '-ms-' {
@#{$browser}keyframes rotate {
from { #{$browser}transform: rotate(0deg);}
to { #{$browser}transform: rotate(360deg);}
}
}
Unfortunately, the @#{$vendor}keyfr... snippet throws an error expecting a number or function after the @. Is there a way to make the @ valid in the css attribute?
Alternatively, has anyone discovered a more elegant method to achieve this using @each, @mixin, or any other technique that avoids manually listing each animation block for different browsers (as shown below)?
@-webkit-keyframes rotate {
from { -webkit-transform: rotate(0deg);}
to { -webkit-transform: rotate(360deg);}
}
@-moz-keyframes rotate {
from { -moz-transform: rotate(0deg);}
to { -moz-transform: rotate(360deg);}
}
@-o-keyframes rotate {
from { -o-transform: rotate(0deg);}
to { -o-transform: rotate(360deg);}
}
@-ms-keyframes rotate {
from { -ms-transform: rotate(0deg);}
to { -ms-transform: rotate(360deg);}
}