Keyframes is not working in LESS mixin with LESSHat

[thehung1724]

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);
  }
}

[PaulOB]

Hi,

I don’t know anything about Less or mixins but if I post your generated code into the demo page you posted then it still works so the error must be somewhere else.

You need to post a demo of the version that is not working for us to debug properly.

(Note that the generated code you posted is an ugly bloated mess because you should only include the code for the prefix you are using and not replicate all the prefixed code. I realize that is caused by the less/mixin styles and one of the reasons you cannot convert me to using a pre-processor. )

[thehung1724]

Hi @PaulOB

I’ll check it later and let you know. Thank you