title: Hover animation not staggering
body: <p>I have the following less file:</p>
  
  <pre><code>// irrelevant stuff -----------------------------------------------------
  
  @ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275);
  
  // ----------
  
  
  // keyframes -----------------------------------------------------
  
  @keyframes in {
      0% { transform: translateY(200px) rotateX(180deg) rotateY(-180deg) rotateZ(15deg); opacity:0; }
      100% { transform: none; opacity: 1; }
  }
  
  @keyframes out {
      0% { transform: none; opacity: 1; }
      100% { transform: translateY(200px) rotateX(180deg) rotateY(-180deg) rotateZ(15deg); opacity:0; }
  }
  
  .vote{
      height:100px;
      width: 100px;
      z-index: 1000;
      opacity: 0;
      background: red;
      margin:15px;
      display: inline-block; 
  }
  
  // ---------
  
  // loop -----------------------------------------------------
  
  .vote-loop (@i) when (@i &gt; 0) {
  
      @stag: 350 * (@i - 1); // skip first
      div:nth-child(@{i}){ animation-delay: ~"@{stag}ms"; }
      .vote-loop(@i - 1);
  }
  
  @iterations: 30; // specify iteration count
  .vote-loop(@iterations); // execute loop
  
  // --------
  
  
  // --------
  .voteRoot{
      background: green;
  }
  
  // apply animation -----------------------------------------------------
  
  .voteRoot:hover .vote {
      animation: in .7s forwards @ease-out-back;
  }
  // apply animation -----------------------------------------------------
  
  .vote {
      animation: out .7s forwards @ease-out-back;
  }
  
  // --------
  </code></pre>
  
  <p>andy my implementation:</p>
  
  <pre><code>import * as React from 'react';
  import './styles.less'
  
  export interface InputProps {
  }
  
  export const PopupMenu = (props: InputProps) =&gt; {
      return &lt;div className="voteRoot"&gt;
          &lt;div className="vote"&gt;Popup Menu&lt;/div&gt;
          &lt;div className="vote"&gt;Popup Menu&lt;/div&gt;
          &lt;div className="vote"&gt;Popup Menu&lt;/div&gt;
          &lt;div className="vote"&gt;Popup Menu&lt;/div&gt;
          &lt;div className="vote"&gt;Popup Menu&lt;/div&gt;
          &lt;div className="vote"&gt;Popup Menu&lt;/div&gt;
          &lt;div className="vote"&gt;Popup Menu&lt;/div&gt;
      &lt;/div&gt;;
  }
  </code></pre>
  
  <p>notice voteRoot:hover .vote plays the animation for the in, but the animation is not staggered.</p>
  
  <p>If the in animation is placed in voteRoot however it is staggered.</p>