LESSCSS and @keyframes

Question

Has anyone had issues with LESSCSS and @keyframes or @-ms-keyframes? It compiles the CSS fine for @-webkit-keyframes, @-moz-keyframes and @-o-keyframes.

Answer 1

These are whitelisted, -ms is missing. keyframes should work: https://github.com/cloudhead/less.js/blob/master/lib/less/parser.js#L988

There is an open request for a fix: https://github.com/cloudhead/less.js/pull/498

The common workaround is to put keyframes in a separate .css file that you import - files with a .css extension are not parsed by LESS.

Answer 2

Keyframes generation seems to be very compicated in LESS, that is why appeared different hacks and tools such as:

• https://github.com/kuus/animate-me.less A bit complicated mixin generating both keyframes and animation with a single call. Accepts both animated elem selector and keyframes css content as strings. Up to 10 steps in keyframes
• https://github.com/thybzi/keyframes My tool inspired by animate-me and other solutions. Generates keyframes only. Animation needs to be applied separately - which allows to apply multiple animations to a single element, and also the same keyframes to multiple elements. More actions needed to create keyframes, but uses true css/less way to generate their style (so you can use variables, operations, functions and mixins there). Up to 16 keyframes steps