title: How To Sync CSS Animations Across Multiple Elements?
body: <p>I have two elements on a page that I'd like to animate via CSS (specifically, -webkit-animation). The animation itself simply bounces an element up and down. One element is always shown and bouncing, the other is not animated until mouse-over (hover). </p>
  
  <p>My question is: Is it possible to sync (have both elements reach their apex at the same time, etc) the animation across both elements regardless of when the 2nd element's animation is started?</p>
  
  <p>Here's my HTML:</p>
  
  <pre><code>&lt;div id="bouncy01"&gt;Drip&lt;/div&gt;
  &lt;div id="bouncy02"&gt;droP&lt;/div&gt;
  </code></pre>
  
  <p>and my CSS:</p>
  
  <pre><code>@-webkit-keyframes bounce {
      0% {-webkit-transform: translateY(0px);}
      25% {-webkit-transform: translateY(-2px);}
      50% {-webkit-transform: translateY(-4px);}
      75% {-webkit-transform: translateY(-2px);}
      100% {-webkit-transform: translateY(0px);}
  }
  #bouncy01,
  #bouncy02 {
      margin:10px;
      float: left;
      background: #ff0000;
      padding: 10px;
      border: 1px solid #777;
  }
  #bouncy01 {
      -webkit-animation:bounce 0.25s ease-in-out infinite alternate;
  }
  #bouncy02 {
      background: #ffff00;
  }
  #bouncy02:hover {
      -webkit-animation:bounce 0.25s ease-in-out infinite alternate;
  }
  </code></pre>
  
  <p>and finally, a working demo of the issue: <a href="http://jsfiddle.net/7ZLmq/2/" rel="noreferrer">http://jsfiddle.net/7ZLmq/2/</a></p>
  
  <p>(to see the problem, mouse-over the yellow block)</p>