css - 单击时更改的带有 css 的动画

Question

我正在为网站制作动画。

我的客户想要一些图片。

这些图像必须在加载时不断翻译，但当我点击该行时，图像必须以指数函数加速 4 秒:之后，网站必须换页。

昨天我创建了动画，每隔几毫秒改变一次动画持续时间，该策略非常有效，但我不喜欢那样，因为它似乎太重了。

现在我找到了另一种解决方案，它只使用 css 和一个钩子(Hook)来更改类。 鉴于这个新的解决方案，我仍然有 2 个问题:

1. 点击后，动画重新开始
2. 动画的第二部分从开始而不是从动画的第一部分开始计算延迟

谢谢你的回复

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

而不是依赖于 animation-delay 来排队这两个动画，你可以在 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
});

在示例中，我使用事件来切换 animation-running 类。您可以使用它来检查动画是否正在运行并防止在单击时重新启动它。