CSS 延迟动画时序问题

Question

我有两个动画运行在一起。

第一个在 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>

Answer 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>

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

CSS 延迟动画时序问题

CSS Animation Timing Issue on Delay

html

css

keyframe

css-animations