title: Why does my transform animation override my original transform?
body: <p>I have three elements, Each of them with its own transform, and I want to animate their translate transform not affecting scale:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.one{
      -webkit-transform: scale(0.5);
  }
  .two{
      -webkit-transform: scale(0.8);
  }
  .three{
      -webkit-transform: scale(0.2);
  }
  
  @-webkit-keyframes bounce{
      from{
          -webkit-transform: translate3d(0, 0, 0);
      }
      to{
          -webkit-transform: translate3d(100px, 100px, 0);
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="one"&gt;test1&lt;/div&gt;
  &lt;div class="two"&gt;test2&lt;/div&gt;
  &lt;div class="three"&gt;test3&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But this transform overrides scale.
  I could use different keyframes for each element. Or wrap each element and style its parent with scale transform and use one only keyframes to animate it. But this all is kind of tricky. Is there a better solution?</p>
  
  <p><a href="http://jsfiddle.net/422t2/" rel="nofollow noreferrer">http://jsfiddle.net/422t2/</a></p>