title: Animation with css that changes on click
body: <p>I’ m doing an animation for a website.</p>
  <p>My client wants a row with some images.</p>
  <p>These images have to translate constantly on load, but when I click in the row, the images must accelerate as an exponential function for 4 seconds: after that, the website must change page.</p>
  <p>Yesterday I have created the animation, changing the animation-duration every some millis by an hook, that strategy was working perfectly, but I don’t like that because it seems to be too heavy.</p>
  <p>Now I have found another solution that uses only css and an hook to change the class.
  Given this new solution, I still have 2 issues:</p>
  <ol>
  <li>after the click, the animation restarts</li>
  <li>the second part of the animation calculates the delay from the start and not from the first part of animation</li>
  </ol>
  <p>Thank you for your reply</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const row = document.querySelector(".row");
  row.addEventListener("click", () =&gt; row.classList.add('row-click'));</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.row{
    display: flex;
    flex-direction:row;
    overflow: hidden;
  }
  
  .cell{
    background:#f00;
    color:#fff;
    font-size:26px;
    min-width:100px;
    margin-right:12px;
    animation: slide-first-desktop 10s linear infinite;
  }
  
  .row-click &gt; .cell{
    animation:
      slide-first-desktop 5s cubic-bezier(1,0,.74,1),
      slide-first-desktop 2s linear infinite;
  }
  @keyframes slide-first-desktop {
    0%{
      transform: translateX(0px);
    }
    100% {
      transform: translateX(-1680px);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row"&gt;
    &lt;div class="cell"&gt;1&lt;/div&gt;
    &lt;div class="cell"&gt;2&lt;/div&gt;
    &lt;div class="cell"&gt;3&lt;/div&gt;
    &lt;div class="cell"&gt;4&lt;/div&gt;
    &lt;div class="cell"&gt;5&lt;/div&gt;
    &lt;div class="cell"&gt;6&lt;/div&gt;
    &lt;div class="cell"&gt;7&lt;/div&gt;
    &lt;div class="cell"&gt;8&lt;/div&gt;
    &lt;div class="cell"&gt;9&lt;/div&gt;
    &lt;div class="cell"&gt;10&lt;/div&gt;
    &lt;div class="cell"&gt;11&lt;/div&gt;
    &lt;div class="cell"&gt;12&lt;/div&gt;
    &lt;div class="cell"&gt;13&lt;/div&gt;
    &lt;div class="cell"&gt;14&lt;/div&gt;
    &lt;div class="cell"&gt;15&lt;/div&gt;
    &lt;div class="cell"&gt;1&lt;/div&gt;
    &lt;div class="cell"&gt;2&lt;/div&gt;
    &lt;div class="cell"&gt;3&lt;/div&gt;
    &lt;div class="cell"&gt;4&lt;/div&gt;
    &lt;div class="cell"&gt;5&lt;/div&gt;
    &lt;div class="cell"&gt;6&lt;/div&gt;
    &lt;div class="cell"&gt;7&lt;/div&gt;
    &lt;div class="cell"&gt;8&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>