跳到主要内容

CSS 动画填充模式

CSS动画填充模式（animation-fill-mode）是控制动画在开始前和结束后的行为的重要属性。通过它，你可以决定元素在动画开始前和结束后的样式状态。这对于创建流畅的动画效果至关重要。

什么是动画填充模式？​

在CSS动画中，默认情况下，元素在动画开始前和结束后会恢复到其原始样式。然而，有时我们希望元素在动画开始前或结束后保持动画的某些状态。这时，animation-fill-mode 就派上用场了。

animation-fill-mode 有四个可能的值：

  1. none（默认值）：动画在开始前和结束后不会应用任何样式。
  2. forwards：动画结束后，元素将保持动画的最后一帧的样式。
  3. backwards：动画开始前，元素将应用动画的第一帧的样式。
  4. both：结合了 forwards 和 backwards，元素在动画开始前和结束后都会应用相应的样式。

代码示例​

以下是一个简单的CSS动画示例，展示了 animation-fill-mode 的不同效果：

css
@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100px);
  }
}

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation: slide 2s;
}

1. none（默认值）​

css
.box {
  animation-fill-mode: none;
}
  • 动画开始前：元素保持原始样式。
  • 动画结束后：元素恢复到原始样式。

2. forwards​

css
.box {
  animation-fill-mode: forwards;
}
  • 动画开始前：元素保持原始样式。
  • 动画结束后：元素保持动画的最后一帧样式（即 transform: translateX(100px);）。

3. backwards​

css
.box {
  animation-fill-mode: backwards;
}
  • 动画开始前：元素应用动画的第一帧样式（即 transform: translateX(0);）。
  • 动画结束后：元素恢复到原始样式。

4. both​

css
.box {
  animation-fill-mode: both;
}
  • 动画开始前：元素应用动画的第一帧样式。
  • 动画结束后：元素保持动画的最后一帧样式。

实际应用场景​

场景1：页面加载时的动画​

假设你希望在页面加载时，一个元素从左侧滑入并停留在屏幕中央。你可以使用 animation-fill-mode: forwards 来确保动画结束后元素保持在最终位置。

css
@keyframes slideIn {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

.slide-in {
  animation: slideIn 1s forwards;
}

场景2：按钮点击后的反馈​

当用户点击按钮时，你可能希望按钮在动画结束后保持某种状态（例如改变颜色）。这时可以使用 animation-fill-mode: forwards。

css
@keyframes buttonClick {
  0% {
    background-color: blue;
  }
  100% {
    background-color: green;
  }
}

.button {
  animation: buttonClick 0.5s forwards;
}

总结​

animation-fill-mode 是控制CSS动画开始前和结束后元素样式的重要属性。通过合理使用 none、forwards、backwards 和 both，你可以创建更加流畅和符合预期的动画效果。

提示

在实际开发中，animation-fill-mode: forwards 是最常用的值，尤其是在需要动画结束后保持最终状态的场景中。

附加资源与练习​

  • 练习1：创建一个动画，让一个元素从顶部滑入并停留在页面中央。使用 animation-fill-mode: forwards 确保动画结束后元素保持在最终位置。
  • 练习2：尝试使用 animation-fill-mode: both 创建一个动画，使元素在动画开始前和结束后都应用相应的样式。

通过不断练习，你将更好地掌握 animation-fill-mode 的使用技巧，并能够将其应用到实际项目中。