My goal is to generate the standard CSS using a SASS Mixin for efficiency.
STANDARD CSS
@-webkit-keyframes crank-up {
100% { -webkit-transform: rotate(360deg);}
}
@-moz-keyframes crank-up {
100% { -moz-transform: rotate(360deg);}
}
@-o-keyframes crank-up {
100% { -o-transform: rotate(360deg);}
}
keyframes crank-up {
100% { transform: rotate(360deg);}
}
I came across a post on Stack Overflow discussing SASS keyframes, so I decided to use a similar mixin mentioned in the post available at SASS keyframes not compiling as wanted.
MIXIN
@mixin keyframes($name) {
@-webkit-keyframes #{$name} {
@content;
}
@-moz-keyframes #{$name} {
@content;
}
@-ms-keyframes #{$name} {
@content;
}
@keyframes #{$name} {
@content;
}
}
In order to address vendor prefixes within keyframes, I modified the initial mixin as follows:
ALTERED MIXIN
@mixin keyframes($first-name, $last-name, $argument) {
@-webkit-keyframes #{$first-name} {
-webkit-#{$last-name}: #{$argument};
}
@-moz-keyframes #{$first-name} {
-moz-#{$last-name}: #{$argument};
}
@-o-keyframes #{$first-name} {
-o-#{$last-name}: #{$argument};
}
@keyframes #{$first-name} {
#{$last-name}: #{$argument};
}
}
The updated call to the mixin would look like this:
SCSS
@include keyframes(crank-up, transform, rotate(360deg)) { }
This approach worked well with single keyframe stages. However, encountering an issue when dealing with multiple keyframes within one animation block such as:
@-webkit-keyframes crank-up {
20%,
40% { -webikit-transform: translateY(34px); }
80% { opacity: .8; }
100% { -webkit-transform: rotate(360deg);}
}
I explored the Compass Animate plugins but wasn't sure if they could offer a solution. I attempted to implement experiments with mixins but haven't achieved the desired outcome yet.
Any guidance on how to handle variable input in mixins would be highly appreciated. Thank you!