title: css Synchronise keyframe animations
body: <p>I'm looking to synchronise the keyframe animation of three different elements.</p>
  
  <p>They are basically three hearts and I want them to follow a heartbeat animation when they are clicked.</p>
  
  <p>When two or more are clicked, I want them to "beat" in sync. </p>
  
  <p>You can check a JSbin <a href="http://jsbin.com/waruqaneji/1/edit?html,css,output" rel="nofollow noreferrer">here</a></p>
  
  <p>What I have so far is :</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>.rating {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 140px;
    height: 50px;
    padding: 5px 10px;
    margin: auto;
    border-radius: 30px;
    background: #FFF;
    display: block;
    overflow: hidden;
    unicode-bidi: bidi-override;
    direction: rtl;
  }
  
  .rating:not(:checked)&gt;input {
    display: none;
  }
  
  
  /* - - - - - LIKE */
  
  #like {
    bottom: -65px;
  }
  
  #like:not(:checked)&gt;label {
    cursor: pointer;
    float: right;
    width: 30px;
    height: 30px;
    display: block;
    margin-right: 7.5px;
    color: rgba(233, 54, 40, .4);
    line-height: 42px;
    text-align: center;
    transition: color 0.2s;
  }
  
  #like:not(:checked)&gt;label:hover,
  #like:not(:checked)&gt;label:hover~label {
    color: rgba(233, 54, 40, .6);
  }
  
  #like&gt;input:checked+label:hover,
  #like&gt;input:checked+label:hover~label,
  #like&gt;input:checked~label:hover,
  #like&gt;input:checked~label:hover~label,
  #like&gt;label:hover~input:checked~label {
    color: rgb(233, 54, 40);
  }
  
  #like&gt;input:checked~label {
    color: rgb(233, 54, 40);
    animation: 1s heartbeat infinite;
  }
  
  @keyframes heartbeat {
    from {
      transform: scale(1);
      transform-origin: center center;
      animation-timing-function: ease-out;
    }
    10% {
      transform: scale(1.2);
      animation-timing-function: ease-in;
    }
    15% {
      transform: scale(1);
      animation-timing-function: ease-out;
    }
    25% {
      transform: scale(1.15);
      animation-timing-function: ease-in;
    }
    35% {
      transform: scale(1);
      animation-timing-function: ease-out;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section id="like" class="rating"&gt;
  
    &lt;!-- THIRD HEART --&gt;
    &lt;input type="radio" id="heart_3" name="like" value="3" /&gt;
    &lt;label for="heart_3" class="heart-slider"&gt;&amp;#9829;&lt;/label&gt;
  
    &lt;!-- SECOND HEART --&gt;
    &lt;input type="radio" id="heart_2" name="like" value="2" /&gt;
    &lt;label for="heart_2" class="heart-slider"&gt;&amp;#9829;&lt;/label&gt;
  
    &lt;!-- FIRST HEART --&gt;
    &lt;input type="radio" id="heart_1" name="like" value="1" /&gt;
    &lt;label for="heart_1" class="heart-slider"&gt;&amp;#9829;&lt;/label&gt;
  
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What is the good way to achieve sync ?</p>
  
  <p>Thank you</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Following Rounin's answer, here's the updated CSS that gets the job done :</p>
  
  <pre><code>#like {
  }
  #like:not(:checked) &gt; label {
    cursor:pointer;
    float: right;
    width: 30px;
    height: 30px;
    display: inline-block;
  
    color: (255, 255, 255);
  
    transition: color 0.2s;
  }
  
  #like:not(:checked) &gt; label:hover,
  #like:not(:checked) &gt; label:hover ~ label {
    color: rgba(252, 108, 133, 1);
  }
  #like &gt; input:checked + label:hover,
  #like &gt; input:checked + label:hover ~ label,
  #like &gt; input:checked ~ label:hover,
  #like &gt; input:checked ~ label:hover ~ label,
  #like &gt; label:hover ~ input:checked ~ label {
   color: rgb(252, 108, 133);
  
  }
  #like &gt; input:checked ~ label {
    color: rgb(252, 108, 133);
  
  }
  
  #heart_1:checked ~ label {
  animation: heartbeat1 1s infinite;
  }
  
  #heart_2:checked ~ label {
  animation: heartbeat2 1s infinite;
  }
  
  #heart_3:checked ~ label {
  animation: heartbeat3 1s infinite;
  }
  
  
  @keyframes heartbeat1 {
    from {
      transform: scale(1);
      transform-origin: center center;
      animation-timing-function: ease-out;
    }
    10% {
      transform: scale(1.2);
      animation-timing-function: ease-in;
    }
    15% {
      transform: scale(1);
      animation-timing-function: ease-out;
    }
    25% {
      transform: scale(1.15);
      animation-timing-function: ease-in;
    }
    35% {
      transform: scale(1);
      animation-timing-function: ease-out;
    }
  }
  
  @keyframes heartbeat2 {
    from {
      transform: scale(1);
      transform-origin: center center;
      animation-timing-function: ease-out;
    }
    10% {
      transform: scale(1.2);
      animation-timing-function: ease-in;
    }
    15% {
      transform: scale(1);
      animation-timing-function: ease-out;
    }
    25% {
      transform: scale(1.15);
      animation-timing-function: ease-in;
    }
    35% {
      transform: scale(1);
      animation-timing-function: ease-out;
    }
  }
  
  @keyframes heartbeat3 {
    from {
      transform: scale(1);
      transform-origin: center center;
      animation-timing-function: ease-out;
    }
    10% {
      transform: scale(1.2);
      animation-timing-function: ease-in;
    }
    15% {
      transform: scale(1);
      animation-timing-function: ease-out;
    }
    25% {
      transform: scale(1.15);
      animation-timing-function: ease-in;
    }
    35% {
      transform: scale(1);
      animation-timing-function: ease-out;
    }
  }
  </code></pre>