为什么我的 CSS 关键帧动画在循环之间稍微暂停？

Question

我正在尝试为一个元素制作“摇摆”运动的动画，就好像它是波浪中的一艘船一样。

JSBIN 在这里：https://jsbin.com/bakugifulo/edit?html,css,output

我在 JSBIN 中有四个彩色示例 div。

(1) 粉色 = 这就是我想要的动议。非常平滑的摇摆和缓动。动画关键帧：

@keyframes rocking1 {
    0% {
        transform: rotate(-5deg);
        animation-timing-function: ease-in-out;
    }
    50% {
        transform: rotate(5deg);
        animation-timing-function: ease-in-out;
    }
    100% {
        transform: rotate(-5deg);
        animation-timing-function: ease-in-out;
    }
}

(2) Blue = 问题：由于这个动画是如何融入到更大的图片中的，我需要它做同样的事情，但最初不开始旋转。意思是，我希望它从“0”旋转开始。

从理论上讲，移动关键帧％点并调整缓动应该给我相同的结果：

@keyframes rocking2 {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-5deg);
        animation-timing-function: ease-out;
    }
    75% {
        transform: rotate(5deg);
        animation-timing-function: ease-in-out;
    }
    100% {
        transform: rotate(0deg);
        animation-timing-function: ease-in;
    }
}

请注意，当动画从 100% 循环回到 0% 时，有一个非常轻微的停顿。这就是我试图阻止的。

(3 & 4) Brown & Green = 上面两个的重复，但是使用线性而不是缓动。请注意，绿色的部分没有暂停。

所以看来问题是我在蓝色 div 中的缓动逻辑。但是，我无法弄清楚这一点。我尝试过各种洗牌和交换缓动选项。完全删除 0% 和 100% 标记。它们都会产生同样的问题……循环时会出现轻微的停顿。

有没有办法无需停顿就能实现我所追求的目标？或者这在使用缓动时是不可避免的（我猜第一个例子是暂停，但你只是没有注意到它，因为它在移动方向的末尾暂停）。

但我希望我只是在我的缓动逻辑中遗漏了一些明显的东西。

Answer 1

您可以指定负值

animation-delay

从所需的帧开始动画。
这是一个基于 rocking1 动画的简单示例，但从

trasform: rotate(0)

开始 - 如果总动画为 5 秒，则

animation-delay = -5 * 25 / 100 = -1.25s

:

div {
  width: 200px;
  height: 100px;
  margin: 50px;
}

#div2 {
  --animation-duration: 5s;
  background: lightblue;
  animation: rocking2 var(--animation-duration) calc(-1 * var(--animation-duration) * .25) infinite ease-in-out;
}

@keyframes rocking2 {
  0%, 100% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(5deg);
  }
}

<div id="div2">easing - start at zero</div>

附注您可以使用逗号将相同的动画帧组合起来：

0%, 100% {
  transform: rotate(-5deg);
}