title: Transition between desired amounts
body: <p>An element has class <code>slider-item</code>:</p>
  
  <pre><code>.slider-item{
    transform: translateY(100%);
    transition: transform 100s ease;
    transition-delay: 800ms;
   }
  </code></pre>
  
  <p>When i click on a button ,i want the element to transition between <code>translateY(-100%)</code> and <code>translateY(0)</code>. </p>
  
  <p>I add classes <code>prev-version</code> and <code>next</code> by javascript respectively:</p>
  
  <pre><code>.slider-item.prev-version{
    transform: translateY(-100%);
    transition: none;
  }
  .slider-item.next{
    transform: translateY(0);
    transition: transform 100s ease;
    transition-delay: 800ms;
  }
  </code></pre>
  
  <p>But i see transition happens between <code>translateY(100%)</code> and <code>translateY(0)</code>. <code>next</code> class overrides <code>transform: translateY(-100%);</code> in <code>prev-version</code> class. Please help me what should i do?</p>