如何使用CSS设置动画的填充模式？

在CSS中，你可以使用animation-fill-mode属性来设置动画的填充模式。这个属性决定了动画在执行之前和之后如何应用样式。

animation-fill-mode属性可以有以下几个值：

1. none：默认值，动画在执行之前和之后不会应用任何样式到目标元素。
2. forwards：动画结束后，元素将保持动画结束时的样式。
3. backwards：动画将在应用于元素之前立即应用第一个关键帧的样式，然后在动画开始时从该样式开始动画。
4. both：动画将遵循forwards和backwards的规则，从而在动画之前和之后都保留样式。

以下是一个简单的例子，展示了如何使用animation-fill-mode属性：

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

div {
  width: 100px;
  height: 100px;
  animation-name: example;
  animation-duration: 4s;
  animation-fill-mode: forwards; /* 动画结束后，元素将保持黄色背景 */
}

在这个例子中，div元素的背景颜色将在4秒内从红色变为黄色，并且由于animation-fill-mode设置为forwards，动画结束后，元素将保持黄色背景。如果你将animation-fill-mode改为both，那么在动画开始之前，元素就会立即应用红色背景，动画结束后则保持黄色背景。