CSS动画进阶（二）：揭秘动画关键特性

前言

欢迎来到CSS动画探索之旅的第二章！上一次，我们浅尝了CSS动画的基本用法。这一次，我们将深入挖掘三个关键特性：animation-fill-mode、animation-direction和animation-iteration-count，揭开CSS动画的奥秘。

animation-fill-mode：定义动画结束后的元素状态

animation-fill-mode决定了动画结束后元素的显示状态。有四个取值：

• none ：动画结束后元素回到初始状态。
• forwards ：动画结束后元素保持在动画结束时的状态。
• backwards ：动画结束后元素回到动画开始时的状态。
• both ：动画结束后元素先回到开始状态，然后再保持结束状态。

示例代码：

.box {
  animation: move 1s forwards;
}

@keyframes move {
  to {
    left: 100px;
  }
}

在这个例子中，当动画结束后，box元素将保持在100px的left值，即使动画已经停止。

animation-direction：控制动画播放方向

animation-direction决定了动画播放的方向。有三个取值：

• normal ：动画从头到尾正常播放。
• reverse ：动画从尾到头播放。
• alternate ：动画交替从头到尾和从尾到头播放。

示例代码：

.box {
  animation: fade 1s alternate;
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

在这个例子中，box元素的透明度将交替从0变为1，然后再变为0。

animation-iteration-count：控制动画播放次数

animation-iteration-count决定了动画播放的次数。有三个取值：

• 1 ：动画播放一次。
• infinite ：动画无限循环播放。
• 指定一个数字 ：动画播放指定的次数。

示例代码：

.box {
  animation: bounce 1s infinite;
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}

在这个例子中，box元素将无限循环地上下弹跳。

巧妙运用，打造惊艳动画效果

理解了这三个特性后，我们就能灵活运用它们创造出各种各样的动画效果。例如：

• 使用animation-fill-mode: forwards保持元素在动画结束时的状态，打造悬停效果。
• 使用animation-direction: alternate实现元素的闪烁或来回移动效果。
• 使用animation-iteration-count: infinite创建无限循环动画，营造动态感。

结语

通过掌握animation-fill-mode、animation-direction和animation-iteration-count这三个关键特性，你的CSS动画能力将更上一层楼。不断探索和实践，你将能够赋予网页元素无限的活力和魅力。