title: keyframes mixin in LESS
body: <p>I've been lurking around for a mixin that would create prefixed keyframes declarations, but i couldn't find anything that actually work as it should without <em>ugly</em> fixes.</p>
  
  <p>So far i've managed to create the following mixin: </p>
  
  <pre><code>.keyframes(@identifier, @animation) {
    .frames { content: ~"'';} @-webkit-keyframes @{identifier} {@{animation}} @-moz-keyframes @{identifier} {@{animation}} @-ms-keyframes @{identifier} {@{animation}} @-o-keyframes @{identifier} {@{animation}} @keyframes @{identifier} {@{animation}"}
  }
  </code></pre>
  
  <p>Where the usage would be:</p>
  
  <pre><code>.keyframes(fade-in, ~"0% { opacity: 0; }50% { opacity: 0; }100% { opacity: 1; }");
  </code></pre>
  
  <p>I feel like this is just plain wrong in matters of readability and also it creates a rule ( <code>.frames { content: '' };</code> ) for each time the <code>.keyframes()</code> mixin is called.</p>
  
  <p>Is there another way of doing this <em>nicely</em>?</p>
  
  <p><strong>Sidenote:</strong>
  When i type <code>npm info less --version</code> it returns <code>1.4.28</code> if that's important.</p>