title: Detect CSS Animation Keyframes with Javascript
body: <p>So I have a simple CSS animation (a circle that grows, and then shrinks back down). I am able to successfully use Javascript to detect the start and end of the animation, but can't figure out how to detect the individual keyframes of that animation. </p>
  
  <p>So my question is: how can I detect when the 50% keyframe has been reached in my animation?</p>
  
  <p>Demo: <a href="http://codepen.io/tymichaels/pen/Mprrxw" rel="nofollow noreferrer">http://codepen.io/tymichaels/pen/Mprrxw</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="center"&gt;
      &lt;svg class="center circle-animation" xmlns="https://www.w3.org/TR/SVG/"&gt;
          &lt;g&gt;
              &lt;circle cx="65" cy="70" r=60 fill="#96CCFF" stroke-width="3" stroke="#8181F7"&gt;&lt;/circle&gt;
              &lt;text x="35" y="75" font-size="18" class="output"&gt;circle&lt;/text&gt;
          &lt;/g&gt;
      &lt;/svg&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>svg { width:150px;}
  
  text {color:#000; font-family: sans-serif; font-weight: bold;}
  
  .center{
      margin-top:100px;
      text-align:center;
      padding-bottom:50px;
  }  
  
  .circle-animation{
      animation-delay:2s;
      animation-duration: 4s;
      animation-name: circle-animation;
      animation-direction: normal;
      animation-timing-function: linear;
  }
  
  @-webkit-keyframes circle-animation {
      0% {transform: scale( 1 );}
      50% {transform: scale( 2.25 );}
      100% {transform: scale( 1 );}
  }
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>window.onload = function() {
      var elm = document.querySelector('.circle-animation');
      var op = document.querySelector('.output');
  
      elm.addEventListener('animationend', function(e) {
          op.innerHTML = 'ended';
      });
  
      elm.addEventListener('animationstart', function(e) {
          op.innerHTML = 'started';
      });
  }
  </code></pre>