title: How to trigger animation on child element when the parent is 75% into its animation ?
body: <p>How to programatically(using Javascript) know when an animation is 75% complete ? actually i have alot of nested HTML elements that need to be animated using an animation delay property and the way it works is the nested animation should trigger , when the parent element is 75% complete , i know how the animationend event works , but thats not really what i am looking for , see the <strong><a href="https://jsfiddle.net/dyt1q4g8/" rel="nofollow">FIDDLE HERE</a></strong> </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div&gt;
    &lt;p&gt;hello world&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>animation delay code:</p>
  
  <pre><code>div p {
    line-height: 200px;
    text-align: center;
    -webkit-animation-name: icon-bounce-in;
    -moz-animation-name: icon-bounce-in;
    -o-animation-name: icon-bounce-in;
    animation-name: icon-bounce-in;
    -webkit-animation-duration: .5s;
    -moz-animation-duration: .5s;
    -o-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-delay: .375s;
    -moz-animation-delay: .375s;
    -o-animation-delay: .375s;
    animation-delay: .375s;
  }
  </code></pre>
  
  <p>(not the best visual example) See how i have delayed the execution of the <code>p</code> animation by 75% manually , but how would i do this programatically in javascript , for a large set of elements (not necessarily add an animation delay to the child elements , but check when the parent element is 75% into its animation stage and then trigger the animation on the child element).</p>