Keyframes is not working in LESS mixin with LESSHat - html

Question

Here is the standard CSS I am trying to produce but want to use a LESS Mixin to do the work. You can check the working demo with pure css here
Pure CSS
#keyframes rotate {
0%{
transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
#-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(180deg);
}
}
#keyframes rotate-fix {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#-webkit-keyframes rotate-fix {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
I'm using the same mixin as in the following post which is shown below.
.keyframes(#name, #frames) {
#-webkit-keyframes #name { #frames(); }
#-moz-keyframes #name { #frames(); }
#-ms-keyframes #name { #frames(); }
#-o-keyframes #name { #frames(); }
#keyframes #name { #frames(); }
}
I am using it like this:
.keyframes(rotate, {
0%{
.transform(rotate(0)); // This is transform mixin from LESSHat
}
100%{
.transform(rotate(180));
}
});
.keyframes(rotate-fix, {
0%{
.transform(rotate(0));
}
100%{
.transform(rotate(360));
}
});
However, it's not working. The animation of the button won't rotate. The code works fine when not including it as a mixin. Can anybody tell me what I'm missing here?
The generated CSS looks like this:
#-moz-keyframes rotate {
.....
}
#-o-keyframes rotate {
.....
}
#-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
}
#keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
}
#-moz-keyframes rotate-fix {
.....
}
#-o-keyframes rotate-fix {
.....
}
#-webkit-keyframes rotate-fix {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes rotate-fix {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}

Answer 1

Be sure to interpolate
like this:
.keyframes(~'<keyframes-name>, <keyframes-definition>')
and take a look at Less Hat docs keyframes section.