title: How to animate zIndex transition with anime.js?
body: <p>I'm trying to do zIndex transition using <a href="http://anime-js.com/" rel="nofollow noreferrer">anime.js</a>:</p>
  <p>I have a div with following css rule applied:</p>
  <pre><code>div {
    background: #1CE2B2;
    height: 50px;
    width: 50px;
    z-index: 1;
  }
  </code></pre>
  <p>I want to animate zIndex transition of the div:</p>
  <pre><code>$(document).click(() =&gt; {
    var keyframes = anime({
      targets: 'div',
      zIndex: [
        { value: '50', duration: 500, },
        { value: '100', duration: 500, },
        { value: '150', duration: 500, },
      ],
    });
  })
  </code></pre>
  <p>but zIndex changes from 1 to 150 without intermediate values 50 and 100. What am I missing?</p>
  <p>Is it possible with velocity.js or jQuery?</p>
  <p><strike>Here is a pen: <a href="https://codepen.io/evgeny_t/pen/BRNKZe" rel="nofollow noreferrer">https://codepen.io/evgeny_t/pen/BRNKZe</a></strike></p>
  <p>How it was filled on github: <a href="https://github.com/juliangarnier/anime/issues/156" rel="nofollow noreferrer">https://github.com/juliangarnier/anime/issues/156</a></p>
  <p><strong>UPD</strong></p>
  <p>The code above should be changed to:</p>
  <pre><code>$(document).click(() =&gt; {
    var keyframes = anime({
      targets: 'div',
      zIndex: [
        { value: '50', duration: 500, round:true },
        { value: '100', duration: 500, round:true },
        { value: '150', duration: 500, round:true },
      ],
    });
  })
  </code></pre>