Keyframes is not working in LESS mixin with LESSHat

[Hung The]

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

[Paulie_D]

Firstly, please don’t dump code like that…it takes up way to much space.

As for your issue, my understanding is that each ‘keyfrane’ declaration should only contain one prefix version at a time.

If you need to vendor prefix, you should have a separate keyframe statement for each prefix.

[Author]

Posts