结合 `animation-delay` 与 `animation-direction` 创建复杂序列动画

时间的魔术师：用 animation-delay 和 animation-direction 编织动画交响曲

各位看官，大家好！今天咱们不聊高深的编程理论，也不抠那些晦涩难懂的规范文档，就来聊聊 CSS 动画里两个挺有意思的小伙伴：animation-delay 和 animation-direction。 别看它们名字平平无奇，但如果搭配得当，就能像魔术师一样，让你的动画变得生动有趣，充满节奏感。

想象一下，你是一位乐队指挥，而 CSS 动画就是你的乐谱。 animation-delay 就像是让某个乐器晚一点入场，制造一种期待感； animation-direction 则是让乐器有时候正着吹，有时候反着吹，增加旋律的变化。 怎么样，是不是有点感觉了？

animation-delay： 迟到的惊喜

animation-delay 顾名思义，就是设置动画延迟播放的时间。 它可以是正数，表示动画在指定时间后开始；也可以是负数，表示动画立即开始，但从动画周期的某个时间点开始播放。

正数延迟：犹抱琵琶半遮面

最常见的用法当然是正数延迟。 比如，你想让一个按钮在页面加载 2 秒后才开始抖动，可以这样写：

.button {
  animation: shake 1s linear infinite;
  animation-delay: 2s;
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

这段代码的意思是，按钮一开始静静地待着，过了 2 秒钟，突然开始“抽风”般的抖动，持续不断。 这种延迟可以用来突出重点，吸引用户的注意力。 想象一下，一个礼物盒，一开始紧闭着，过了几秒钟，突然自动打开，是不是更有惊喜感？

负数延迟：时光倒流的小技巧

负数延迟就有点意思了。 它可以让动画直接从中间开始播放。 比如，你想让一个进度条直接从 50% 的位置开始动画，可以这样写：

.progress-bar {
  animation: progress 2s linear forwards;
  animation-delay: -1s; /* 注意这里是 -1s */
}

@keyframes progress {
  0% { width: 0; }
  100% { width: 100%; }
}

由于动画总时长是 2 秒，延迟 -1 秒，相当于从动画的中间位置（50%）开始播放。 这种技巧在某些场景下非常有用，比如，你想做一个预加载动画，先显示一个静态的加载状态，然后过一段时间再开始真正的加载动画，就可以用负数延迟来实现。

animation-direction： 动画的百变舞姿

animation-direction 决定了动画播放的方向。 它有四个可选值：

• normal: 默认值，动画正向播放。
• reverse: 动画反向播放。
• alternate: 动画先正向播放，然后反向播放，交替进行。
• alternate-reverse: 动画先反向播放，然后正向播放，交替进行。

normal 和 reverse：简单的方向选择

normal 没什么好说的，就是动画从头到尾正着播放。 reverse 则让动画倒着播放。 比如，你想让一个箭头从右向左移动，可以这样写：

.arrow {
  animation: move 2s linear infinite alternate;
}

@keyframes move {
  from { transform: translateX(100px); }
  to { transform: translateX(0); }
}

然后，你想让它从左向右移动，只需要把 animation-direction 改成 reverse 就行了。

alternate 和 alternate-reverse：动画的来回穿梭

alternate 和 alternate-reverse 是 animation-direction 的精髓所在。 它们可以让动画来回播放，创造出一种循环往复的效果。

alternate 先正向播放，然后反向播放，再正向播放，以此类推。 就像一个钟摆，左右摇摆，永不停歇。

alternate-reverse 则相反，先反向播放，然后正向播放，再反向播放，以此类推。 就像一个弹簧，先被压缩，然后释放，再被压缩，周而复始。

animation-delay + animation-direction： 动画的交响乐章

好了，铺垫了这么多，终于到了激动人心的时刻。 让我们把 animation-delay 和 animation-direction 组合起来，看看能碰撞出什么样的火花。

案例一：延迟出现的波浪

假设我们想做一个水波纹动画，让水波从左向右依次出现，并来回波动。 可以这样实现：

<div class="wave-container">
  <div class="wave wave1"></div>
  <div class="wave wave2"></div>
  <div class="wave wave3"></div>
</div>

.wave-container {
  width: 300px;
  height: 100px;
  overflow: hidden;
  position: relative;
}

.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 300%;
  height: 100%;
  background: url('wave.png') repeat-x; /* 假设你有一张波浪的图片 */
  animation: waveMove 5s linear infinite;
}

.wave1 {
  animation-delay: 0s;
}

.wave2 {
  animation-delay: 1s;
}

.wave3 {
  animation-delay: 2s;
}

@keyframes waveMove {
  0% { transform: translateX(0); }
  100% { transform: translateX(-33.33%); }
}

这段代码创建了三个波浪，每个波浪都向左移动，形成水波的效果。 通过 animation-delay，我们让第二个波浪延迟 1 秒出现，第三个波浪延迟 2 秒出现，这样就形成了一种波浪依次出现的视觉效果。 如果你想要波浪来回波动，可以加上 animation-direction: alternate。

案例二：交错上升的柱状图

再来一个例子，我们想做一个柱状图动画，让每个柱子依次上升，并来回伸缩。 可以这样实现：

<div class="bar-container">
  <div class="bar bar1"></div>
  <div class="bar bar2"></div>
  <div class="bar bar3"></div>
  <div class="bar bar4"></div>
  <div class="bar bar5"></div>
</div>

.bar-container {
  width: 300px;
  height: 200px;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
}

.bar {
  width: 20px;
  background-color: #4CAF50;
  animation: barRise 2s linear infinite alternate;
}

.bar1 {
  animation-delay: 0s;
}

.bar2 {
  animation-delay: 0.5s;
}

.bar3 {
  animation-delay: 1s;
}

.bar4 {
  animation-delay: 1.5s;
}

.bar5 {
  animation-delay: 2s;
}

@keyframes barRise {
  0% { height: 20px; }
  100% { height: 150px; }
}

这段代码创建了五个柱子，每个柱子都上下伸缩。 通过 animation-delay，我们让每个柱子依次开始动画，形成一种交错上升的效果。 alternate 让柱子上下循环运动，增加动画的趣味性。

案例三：心跳动画的节奏变化

最后，我们来做一个心跳动画，让心跳的节奏随着时间变化。 比如，一开始心跳比较慢，然后逐渐加快，最后又慢下来。

<div class="heart"></div>

.heart {
  width: 100px;
  height: 100px;
  background-color: red;
  clip-path: polygon(50% 20%, 90% 20%, 90% 60%, 50% 100%, 10% 60%, 10% 20%);
  animation: heartBeat 3s linear infinite alternate;
}

@keyframes heartBeat {
  0% { transform: scale(1); }
  25% { transform: scale(1.2); animation-timing-function: ease-in;} /* 加速 */
  50% { transform: scale(1); animation-delay: 0.5s; } /* 停顿 */
  75% { transform: scale(1.2); animation-timing-function: ease-out;} /* 减速 */
  100% { transform: scale(1); }
}

在这个例子中，我们使用 animation-timing-function 和 animation-delay 在关键帧中调整心跳的节奏。 在 25% 的关键帧，我们使用 ease-in 让心跳加速，在 50% 的关键帧，我们使用 animation-delay 让心跳停顿一下，在 75% 的关键帧，我们使用 ease-out 让心跳减速。 这样就创造出了一种心跳节奏变化的动画效果。

小结

animation-delay 和 animation-direction 就像动画的调味剂，可以为你的动画增添色彩和趣味。 通过巧妙地组合它们，你可以创造出各种各样令人惊艳的动画效果。

当然，动画的世界远不止这些。 还有 animation-iteration-count (动画循环次数)、animation-fill-mode (动画填充模式) 等等。 掌握了这些属性，你就能成为真正的动画大师，用代码编织出绚丽多彩的视觉盛宴。

希望这篇文章能给你带来一些启发。 记住，动画的乐趣在于创造。 勇敢地去尝试，去探索，你会发现无限的可能！ 祝大家玩得开心！