动画保持结束状态 - CSS

CSS 动画是使我们的网站变得更生动和吸引人的一个强大工具。有时候，在动画结束后我们想要保持元素在最后的状态而不是返回到最初的状态。本文将介绍如何使用 CSS 保持动画结束状态。

animation-fill-mode 属性

animation-fill-mode 属性为我们提供了四个可能的值：

• none（默认）：动画执行完毕后元素返回起始状态。
• forwards：动画执行完毕后，元素将保持在最后一帧的状态。
• backwards：动画过程中样式应用于元素。在动画之前，元素会在 animation-delay 时间内应用动画的起始样式。
• both：向前和向后都应用动画的值。

使用示例

下面的示例使用 animation-fill-mode: forwards 使元素保持在最后一帧的状态：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

在示例中， .box 元素将从红色渐变到黄色，动画持续时间为 2 秒。采用 animation-fill-mode: forwards 将元素保留在最后一帧的状态--也就是黄色，使得动画结束后元素不会返回到红色。

总结

通过使用 animation-fill-mode 属性，我们可以轻松地让元素保持在动画结束时的状态。现在，你可以为你的网站增加一些有趣的动画效果，并设置元素的结束状态。

注意：animation-fill-mode 属性应用于每一个动画阶段，包括无限循环。