title: Apply style after CSS animation without JS
body: <p>I have a chained CSS animation that's mostly working fine:</p>
  
  <pre><code>#product {
      background: red;
      width: 10%;
      height: 10%;
      border: none;
      left: -22%;
      top: 50%;
      top: 40%;
      animation: product_across 2s linear, product_down 1s;
      animation-delay: 0s, 2s;
  }
  @-moz-keyframes product_across {
      from { left: -22%; }
      to { left: 98%; }
  }
  @-moz-keyframes product_down {
      from { top: 40%; left: 98%; }
      to { top: 98%; left: 128.5%; }
  }
  </code></pre>
  
  <p>The thing is, after the first animation (<code>product_across</code>) has finished, I want to apply a style. Not animate to it, just apply it.</p>
  
  <p>Does CSS3 allow for this? I guess I'm looking for a sort of "on animation end" property, or something.</p>
  
  <p>For the moment I'm getting round it with:</p>
  
  <pre><code>@-moz-keyframes product_down {
      from { -moz-transform: rotate(45deg); top: 40%; left: 98%; }
      to { -moz-transform: rotate(45deg); top: 98%; left: 128.5%; }
  }
  </code></pre>
  
  <p>...where the rotation is the style I wish to apply. By setting the <code>from</code>/<code>to</code> states to the same value for this property, it effectively does what I want, but I can't help thinking there must be a better way.</p>