title: z-index with CSS animation
body: <p>I recently saw a preloading animation on codepen.<a href="https://codepen.io/hafizfattah/pen/AbBtc?limit=all&amp;page=4&amp;q=loading" rel="nofollow noreferrer">link's here</a>.</p>
  
  <p>And the keyframe code shows below</p>
  
  <pre><code>@-webkit-keyframes kanan {
      0% {-webkit-transform:translateX(20px);
      }
  
      50%{-webkit-transform:translateX(-20px);
      }
  
      100%{-webkit-transform:translateX(20px);
      z-index:200;
      }
  }
  @-webkit-keyframes kiri {
       0% {-webkit-transform:translateX(-20px);
      z-index:200;
      }
      50%{-webkit-transform:translateX(20px);
      }
      100%{-webkit-transform:translateX(-20px);
      }
  }
  </code></pre>
  
  <p>I am confused about when z-index of the circles change?I guess z-index changes between keyframes(25% and 75%) so that it has circling effect?Do all the discrete properties behave like that?Thanks in advance.</p>