CSS | animation-fill-mode 属性

CSS的animation-fill-mode属性指定了动画执行前和执行后元素的样式。

语法

animation-fill-mode: none|forwards|backwards|both|initial|inherit;

其中，可能的属性值有：

• none：默认值，不会将任何样式应用于动画之外的元素。
• forwards：动画完成时，元素将保留最后一帧的样式。
• backwards：动画未开始时，元素将应用第一帧的样式。
• both：元素将具有 forwards 和 backwards 两种样式。
• initial：将此属性重置为其默认值。
• inherit：从父元素继承此属性。

示例

以下示例演示了如何使用animation-fill-mode属性。在此示例中，我们设置文本在动画执行前后都保留红色样式：

h1 {
  animation-name: text-color;
  animation-duration: 2s;
  animation-fill-mode: both;
}

@keyframes text-color {
  0% {
    color: black;
  }
  100% {
    color: red;
  }
}

在上面的示例中，我们将animation-fill-mode属性设置为both，以便动画执行前后都应用样式。在@keyframes规则中使用0%和100%设置开始和结束状态，并将文本颜色从黑色切换到红色。

总结

animation-fill-mode属性是CSS动画的一项重要属性，它可以控制动画执行前和执行后元素的样式，使动画效果更加鲜明。它可以设置为五种可能的属性值，包括none，forwards，backwards，both，initial和inherit。在使用时，可以根据实际需求选择相应的属性值，使动画效果更加自然和生动。