Animation with css that changes on click

Question

I’ m doing an animation for a website.

My client wants a row with some images.

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.

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.

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:

1. after the click, the animation restarts
2. the second part of the animation calculates the delay from the start and not from the first part of animation

Thank you for your reply

const row = document.querySelector(".row");
row.addEventListener("click", () => row.classList.add('row-click'));

.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 > .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);
  }
}

<div class="row">
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>
  <div class="cell">4</div>
  <div class="cell">5</div>
  <div class="cell">6</div>
  <div class="cell">7</div>
  <div class="cell">8</div>
  <div class="cell">9</div>
  <div class="cell">10</div>
  <div class="cell">11</div>
  <div class="cell">12</div>
  <div class="cell">13</div>
  <div class="cell">14</div>
  <div class="cell">15</div>
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>
  <div class="cell">4</div>
  <div class="cell">5</div>
  <div class="cell">6</div>
  <div class="cell">7</div>
  <div class="cell">8</div>
</div>

Answer 1

Instead of relying on the animation-delay to queue the two animations, you can listen to animation events in JavaScript: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationstart_event

const animation = document.querySelector('p.animation');

animation.addEventListener('animationstart', () => {
  console.log('animation started');
  animation.classList.add('animation-running');
  // do something
});

animation.addEventListener('animationend', () => {
  console.log('animation ended');
  animation.classList.remove('animation-running');
  // do something
});

In the example, I'm using the events to toggle a animation-running class. You could use this to check if an animation is running and prevent to restart it on click.