CSS动画时间延迟问题答案

【问题标题】：CSS Animation Timing Issue on DelayCSS动画时间延迟问题
【发布时间】：2021-10-11 18:21:52
【问题描述】：

我有两个动画一起运行。

第一个用于无限次运行的边界，持续时间为 2 秒。
第二个用于实际元素，它也每 2 秒运行无限次，持续时间为 0.1 秒。

基本上，我希望元素在每个边框比例的开头发生碰撞（即比例 1.05）。为此，我将元素动画延迟到每个周期运行边框动画为止。

我正在使用这个技巧https://css-tricks.com/css-keyframe-animation-delay-iterations/ 来帮助解决元素碰撞延迟，但由于我无法理解的原因，碰撞发生的时间一直在不断变化。（如果你注意大约 1 分钟，你会注意到这一点）。

我很想知道为什么会发生这种情况，或者是否有更好的方法来做我想做的事。

.container {
  position: relative;
  width: 100px;
  height: 100px;
  background: pink;
  border-radius: 50%;
  margin: 50px auto;
  animation: containerAnimation 2.1s infinite;
}

.animated-border {
  position: absolute;
  left: 0;
  width: 97px;
  height: 97px;
  border: 2px solid;
  border-radius: 50%;
  animation: borderAnimation 2s infinite;
}

@keyframes containerAnimation {

  0% {
    transform: scale3d(1, 1, 1);
  }

  5% {
    transform: scale3d(1.05, 1.05, 1);
  }
  
  100% {
    transform: scale3d(1.05, 1.05, 1);
  }
}

@keyframes borderAnimation {
  0% {
    transform: scale3d(1, 1, 1);
    opacity: 1;
  }
  
  100% {
    transform: scale3d(2, 2, 1);
    opacity: 0;
  }
}

<div class="container">
  <div class="animated-border"></div>
</div>

【问题讨论】：

标签： html css css-animations keyframe

【解决方案1】：

你有一个动画运行 2 秒，另一个运行 2.1 秒，当然它们不会同步。您可以做的是在关键帧中设置延迟，因此它将以不同的值开始，而不是 0%。

例如：

.container {
  position: relative;
  width: 100px;
  height: 100px;
  background: pink;
  border-radius: 50%;
  margin: 50px auto;
  animation: containerAnimation 2s infinite;
}

.animated-border {
  position: absolute;
  left: 0;
  width: 97px;
  height: 97px;
  border: 2px solid;
  border-radius: 50%;
  animation: borderAnimation 2s infinite;
}

@keyframes containerAnimation {

  0% {
    transform: scale3d(0.9, 0.9, 1); // I've changed it to be more noticable.
  }

  5% {
    transform: scale3d(1.05, 1.05, 1);
  }
  
  100% {
    transform: scale3d(1.05, 1.05, 1);
  }
}

@keyframes borderAnimation {
  5% { // Start from here instead from 0%.
    transform: scale3d(1, 1, 1);
    opacity: 1;
  }
  
  100% {
    transform: scale3d(2, 2, 1);
    opacity: 0;
  }
}

<div class="container">
  <div class="animated-border"></div>
</div>

由于现在的动画长度相同，您可以通过百分比值匹配步数。这里边框动画在圆圈完成扩展后立即开始。

【讨论】：