animation-fill-mode

animation-fill-mode 是 CSS 中的一个属性，用于设置动画在完成之后的状态。它有三个可能的值：
- forwards：动画在结束时保持最后一帧的样式
- backwards：动画在开始时使用第一帧的样式
- both：同时应用 forwards 和 backwards 的效果

例如：

div {
  animation-name: mymove;
  animation-duration: 4s;
  animation-fill-mode: forwards;
}

这将会使得在动画结束之后，div 元素会保持最后一帧的样式。

相关问题

animation-fill-mode的用法

animation-fill-mode表示动画状态在播放完后是否要保持最后一帧或者回到初始状态，常用的有以下四种值：

1. none：不改变默认行为，动画播放完后回到初始状态。
2. forwards：动画播放完成后，保持最后一帧状态。
3. backwards：在动画播放之前，将动画设置为初始状态。
4. both：同时设置forwards和backwards。动画播放完成后，保持最后一帧状态并回到初始状态。

.ball1{ position: absolute; width: 200px; height: 200px; top: 100px; left: 0px; background: url("images/篮球.jpeg") no-repeat 0 0; border-radius: 200px; background-size:cover; animation: rotate 5s linear 1s 1; } .ball2{ position: absolute; top:0px; left:200px; } .ball3{ position: absolute; top: 100px; left: 0px; width: 200px; height: 200px; } .ball4{ animation: move 5s ; animation-fill-mode: forwards; }

这是一段 CSS 代码，其中包含了四个类名分别为 ball1、ball2、ball3 和 ball4 的元素。其中 ball1 元素是一个宽高为 200px 的圆形图片，通过设置背景图片和 `border-radius` 属性实现。该元素还通过 `animation` 属性设置了一个名为 `rotate` 的旋转动画，该动画会在 1s 后开始播放，持续时间为 5s，采用线性变化。ball2 元素位于 ball1 元素的右侧顶部，ball3 元素与 ball1 元素重叠，但没有设置背景图片。ball4 元素通过 `animation` 属性设置了一个名为 `move` 的动画。该动画没有指定持续时间，因此默认为 0s，但通过设置 `animation-fill-mode` 属性为 `forwards`，实现了在动画结束后保持动画最后一帧状态的效果。