prefixed attributes (e.g. transform) in animation

[szepeviktor]

Do you have a solution for

@<PREFIX>keyframes {
    <PREFIX>transform: rotate(360deg);
}

that prevents all prefixes selectors × all prefixes attributes version? Like

@-webkit-keyframes {
    -o-transform: rotate(360deg);
}

[szepeviktor]

Could this be the answer?

@myWiggle:   {
  10% { #rotate(14deg); }  
  20% { #rotate(-12deg); } 
  30% { #rotate(10deg); }  
  40% { #rotate(-8deg); }
  50% { #rotate(6deg); }
  60% { #rotate(-4deg); }  
  70% { #rotate(3deg); } 
  80% { #rotate(-2deg); }  
  90% { #rotate(1deg); } 
  100% { #rotate(0deg); }
};

#rotate(@deg){
    @{vendor}transform: rotate(@deg);
}

#doKeyFrames(@name; @frames) {
    @-webkit-keyframes @name {
      @vendor: -webkit-;
      @frames(); 
    }
    @-moz-keyframes @name {
      @vendor: -moz-;
      @frames(); 
    }
    @-o-keyframes @name {
      @vendor: -o-;
      @frames(); 
    } 
    @keyframes @name {
      @vendor: ~'';
      @frames(); 
    }
}

#doKeyFrames(wiggle; @myWiggle);

[marekhrabe]

LESS Hat is just about not worying about vendor prefixes again. You can use this syntax and it will correctly generate everything for you :)

.keyframes(~'animationName, 0%{ transform: scale(1.5); color: blue; } 100%{ transform: scale(2); color: red }');

You can read more about this feature in the README of this repo

[marekhrabe]

Feel free to discuss on if you are trying to do anything special that the standard routine doesn't cover