title: transform scale element when keyframe animation applied to it
body: <p>I have an element that has css3 animation with keyframes applied to it but still I want to scale this element. But it seems that because <strong>transform translate</strong> is already applied in the animation <strong>transform scale</strong> is not working</p>
  
  <p>e.g.: let say I have 4 clouds (div elements) moving from right to left, I want those clouds to be different scales</p>
  
  <pre><code>.x1 {
    -webkit-animation-name: moveclouds;
    -moz-animation-name: moveclouds;
    animation-name: moveclouds;
  
    -webkit-animation-duration: 170s;
    -moz-animation-duration: 170s;
    animation-duration: 170s;
  
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear;
  
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
  
    -webkit-transform: scale(0.79);
    -moz-transform: scale(0.79);
    -ms-transform: scale(0.79);
    -o-transform: scale(0.79);
    transform: scale(0.79);
  }
  .x2{ ...}
  .x3{...}
  .x4{...}
  
  @keyframes moveclouds {
    from {
      transform: translateX(2400px);
      /* note: I'm using vendor prefixes, I just want to simplified it here */
    }
  
    to {
      transform: translateX(-200px);
    }
  }
  </code></pre>
  
  <p>animation works well, scale not </p>
  
  <p><strong>question:</strong> anyone got an ide how to enforce the scale ?</p>
  
  <p>I'm using this example <a href="http://thecodeplayer.com/walkthrough/pure-css3-animated-clouds-background" rel="nofollow">http://thecodeplayer.com/walkthrough/pure-css3-animated-clouds-background</a> but tweeking it a bit (see the keyframe difference)  </p>