How to set keyframes name in LESS

Question

I try to set up this LESS mixin for CSS animation keyframes:

.keyframes(@name, @from, @to) {;
  @-webkit-keyframes \"@name\" {
    from {
      @from;  
             


        

Answer 1

Also thanks to the great answer by Martin Turjak, (thank you for that) I just put on github a less mixin which generate keyframes and animation's css code without hacks and in a flexible way, you can find it here github.com/kuus/animate-me.less.

With this mixin you can write this code to obtain valid and cross browser css (see the github repo for a complete explanation):

.animate-me(ComplexAnimation; 0.4s ease; '.complex-animation';
    '50%, 100%'; '%stransform: translateZ(-250px) rotateY(30deg)';
    70%; '%stransform: translateZ(-250px) rotateY(30deg); opacity: .5; background:   green';
    30%; '%stransform: translateZ(-250px) rotateY(30deg); opacity: .2; background: yellow';
    80%; '%stransform: translateZ(-250px) rotateY(30deg); opacity: 1; background: red'
);