CSS 动画指南 - 第 2 部分 animation-iteration-count animation-timing-function animation-play-state animation-delay animation-fill-mode animation-direction animation 简写 这就是第 2 部分的内容！🎉

2025-06-09

CSS 动画指南 - 第 2 部分

动画迭代次数

动画计时功能

动画播放状态

动画延迟

动画填充模式

动画导演

动画速记

第二部分就到这里！🎉

嘿！你回来了🙌

在第一部分中，我们让一切动起来。现在我们将深入探讨动画的应用。我们已经介绍了animation-name和animation-duration，但还有更多内容需要学习。

不要忘记，所有代码都可以在以下 CodePen 集合中找到👍这样您就可以编辑和试用示例。

CodePen 演示集链接

动画迭代次数

让我们从上次的动画继续，修改一下我们的第一个动画。如果你需要复习一下，这就是我们之前做的。

div 旋转一次的基本动画

但是动画只运行了一次。如果我们想让动画运行多次或者永不停止呢？在加载动画的情况下，我们可能希望动画无限循环。这就是animation-iteration-countRendering 的作用所在。

假设我们希望动画运行五次，从而产生十秒的动画。

div {
  animation-duration: 2s;
  animation-name: spin;
  animation-iteration-count: 5;
}
Enter fullscreen mode Exit fullscreen mode

就这么简单！让我们把旋转的方块变成一个加载旋转器。为此，animation-iteration-count还接受关键字infinite👍

div {
  animation-duration: 2s;
  animation-name: spin;
  animation-iteration-count: infinite;
}
Enter fullscreen mode Exit fullscreen mode

这给了我们以下信息🎉

动画计时功能

我们再看看那个旋转的方块。方块确实在继续旋转，但每次旋转后都会有短暂的停顿。这是因为animation-timing-function……

我们的动画方块无限旋转，每次循环后都会暂停

该animation-timing-function属性定义动画的速度特性。它接受几个不同的值。

  • cubic-bezier(x1, y1, x2, y2)- 提供定义自定义速度的能力
  • ease- 开始和结束时速度较慢，但​​中间速度较快（默认）
  • ease-in- 慢慢开始
  • ease-in-out- 开始和结束缓慢，但不同于轻松
  • ease-out- 慢慢结束
  • linear- 始终保持速度
  • steps(number, direction <optional>)- 提供一种将动画分成相等步骤的方法。direction值可以是start或end。start表示第一步发生在动画的开始时。end表示最后一步发生在动画的结束时。end是默认值。

那么，你会选择哪一个呢？不同的场景需要不同的缓动机制。以下是一些关于缓动机制基础知识的简短资源。

链接到有关动画缓和的 MDN 文章

您可以尝试不同的缓动效果，找到适合您应用程序的最佳效果。此笔演示了如何animation-timing-function影响相同的动画。

可能比较难掌握的是cubic-bezier。本质上，该函数定义了一条三次贝塞尔曲线。这篇文章对该函数cubic-bezier进行了很好的解释。cubic-bezier

链接到有关动画计时功能的 MDN 文章

或者，您可能更喜欢使用该cubic-bezier函数并将其与其他缓和值进行比较。cubic -bezier.com可以满足您的需求👍

回到旋转的方块。如何消除那个小间隙？
我们可以应用linear计时来替换默认ease计时。

div {
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-name: spin;
  animation-timing-function: linear;
}
Enter fullscreen mode Exit fullscreen mode

这将给我们

甜🍭

动画播放状态

播放状态非常简单。你可以暂停动画或让动画继续播放。我们使用animation-play-state属性来控制播放状态。对于旋转的方块，我们可以添加一个复选框来切换播放状态。使用同级选择器，我们可以切换播放状态👍

div {
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-name: spin;
  animation-play-state: paused;
  animation-timing-function: linear;
}

:checked ~ div {
  animation-play-state: running;
}
Enter fullscreen mode Exit fullscreen mode

当:checked播放状态为running👟时

动画延迟

接下来是延迟动画。例如animation-duration，animation-delay以毫秒或秒为单位的时间值。

让我们添加一些额外的方块，并让它们并排旋转一次。注意，我们已将animation-timing-function值更改为ease-out。

三个方块彼此相邻同步动画

如果我们给每个方块添加延迟，我们可以创建交错效果吗？

div {
  animation-duration: 1s;
  animation-name: spin;
  animation-timing-function: ease-out;
}
div:nth-of-type(1) {
  animation-delay: 0s;
}
div:nth-of-type(2) {
  animation-delay: 0.5s;
}
div:nth-of-type(3) {
  animation-delay: 1s;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
Enter fullscreen mode Exit fullscreen mode

答案是肯定的！👍

但是，如果我们想让方块继续旋转，就会失去交错效果。这是因为animation-delay它只会在动画开始前应用一次 👎 它并不适用于动画的每次迭代。此时，我们有两个选择。我们可以使用动画检查器尝试不同的延迟。或者，我们可以尝试通过延迟旋转来停止动画的前半部分。

@keyframes spin {
  0%, 50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
Enter fullscreen mode Exit fullscreen mode

事实上，如果我们利用 CSS 变量，可以创建一些有趣的延迟效果。例如，使用负延迟。这可以产生动画在某个时刻已经完全展开的效果。一个很好的用例是交错动画，而无需将元素交错进入动画状态。移动此演示中的滑块，查看我们可以实现的一些不同效果。

动画填充模式

接下来是animation-fill-mode。这个很神奇🎩

默认情况下，当我们将动画应用于元素时，它在运行之前或运行之后都不会产生任何效果。animation-fill-mode改变这一点。

animation-fill-mode我们可以使用的值；

  • none- 元素不保留任何样式
  • forwards- 元素保留动画样式
  • backwards- 元素保留第一个关键帧的样式
  • both- 元素在两个方向上都保留样式

让我们考虑一个动画，其中我们将元素缩小到其大小的一半。animation-fill-mode设置为none。

不使用时，animation-fill-mode元素会在动画结束时恢复到初始大小。但使用animation-fill-mode时，我们可以在动画结束后将元素保持在一半的大小。

div {
  animation-delay: 1s;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-name: shrink;
  animation-timing-function: ease-out;
}
@keyframes shrink {
  to {
    transform: scale(0.5);
  }
}
Enter fullscreen mode Exit fullscreen mode

现在更常见的使用场景animation-fill-mode是显示和隐藏元素。考虑一个场景，我们有三个想要淡入的元素。

@keyframes fadeIn {
  from {
    opacity: 0;
  }
}
Enter fullscreen mode Exit fullscreen mode

我们更喜欢交错的效果，所以我们给每个元素不同的animation-delay。

但结果并不像我们期望的那样，因为我们没有使用animation-fill-mode👎应用animation-fill-mode: backwards来解决这个问题！

另一个演示是使用animation-fill-mode🚶来考虑这个步行标志

动画导演

最后但同样重要的是animation-direction。毫无疑问，此属性允许您定义动画的方向。主要有四个关键字：

  • alternate- 动画的方向在每次迭代时交替
  • alternate-reverse- 相同，alternate但以相反的方式开始
  • normal- 不言自明
  • reverse- 动画反向播放

比如，我们可以用alternate它来做能打开和关闭的东西。
比如场记板怎么样？

使用animation-iteration-countof 2withanimation-direction alternate可以节省我们编写单独动画的时间。

动画速记

如果你已经读到这里，那么所有animation属性就都懂了🎉现在你已经全部了解了🤓现在可以使用简写属性来整理你的动画代码了。没错，你不需要每次都把所有属性都写出来😅

这

div {
  animation-delay: 1s;
  animation-direction: normal;
  animation-duration: 0.5s;
  animation-fill-mode: normal;
  animation-iteration-count: infinite;
  animation-name: spin;
  animation-play-state: running;
  animation-timing-function: ease-out;
}
Enter fullscreen mode Exit fullscreen mode

相当于这个

div {
  animation: spin 0.5s 1s ease-out infinite normal none running;
}
Enter fullscreen mode Exit fullscreen mode

甜🍭

animation: [NAME] [DURATION] [DELAY] [TIMING-FUNCTION] [ITERATION-COUNT] [DIRECTION] [FILL-MODE] [PLAY-STATE];
Enter fullscreen mode Exit fullscreen mode

这些属性是可选的，因此我们可以使用所需的任何组合👍

但这还不是全部。使用该animation属性可以更轻松地将许多动画应用于元素。

考虑一下我们制作的一个元素从下方进入然后旋转 45 度。

div {
  animation-delay: 0s, 0.5s;
  animation-duration: 0.5s, 0.75s;
  animation-fill-mode: forwards;
  animation-name: flyIn, rotate;
}
@keyframes flyIn {
  from {
    opacity: 0;
    transform: translateY(300%) scale(0);
  }
}
@keyframes rotate {
  to {
    transform: rotate(45deg);
  }
}
Enter fullscreen mode Exit fullscreen mode

您可以使用逗号分隔属性值animation。但您也可以这样做

div {
  animation: flyIn 0.5s forwards, rotate 0.5s 0.75s forwards;
}
Enter fullscreen mode Exit fullscreen mode

这带来了大量的机会🤓

第二部分就到这里！🎉

我们已经了解了不同的animation属性及其行为。

现在您应该已经对 CSS 动画有了很好的了解了💪我希望您能加入我的第 3 部分，我们将通过研究使用 CSS 动画的不同方式来总结。

链接至第 3 部分

请记住，所有演示代码均可在以下 CodePen 集合中找到👍

CodePen 演示集链接

一如既往，如果您有任何问题或建议，请随时留言或发推文给我🐦！记得在社交媒体上与我联系！😎

鏂囩珷鏉ユ簮锛�https://dev.to/jh3y/a-guide-to-css-animation-part-2-2hjo
Devto 翻译
PREV
CSS 动画指南 - 第三部分 CSS 变量 曲线动画路径 JavaScript 钩子 你真的需要 CSS 动画吗？就是这么简单！🎉
NEXT
如何将软件包发布到 GitHub 软件包注册表