要使用CSS设置动画的填充模式，您可以使用`animationfillmode`属性。此属性控制了动画在播放前后元素的样式。这里有三个例子可以帮助您理解如何使用`animationfillmode`：
1.向前填充（forwards）:
动画完成后，保留结束时的状态。
```css
div
{
width:
150px;
height:
200px;
position:
relative;
background:
red;
animationname:
myanim;
animationduration:
2s;
animationfillmode:
forwards;
}
@keyframes
myanim
{
from
{
left:
0px;
backgroundcolor:
green;
}
to
{
left:
200px;
backgroundcolor:
blue;
}
}
```
2.向后填充（backwards）:
动画开始之前，应用开始时的状态。
```css
div
{
width:
150px;
height:
200px;
position:
relative;
background:
red;
animationname:
myanim;
animationduration:
2s;
animationfillmode:
backwards;
}
@keyframes
myanim
{
from
{
left:
0px;
backgroundcolor:
green;
}
to
{
left:
200px;
backgroundcolor:
blue;
}
}
```
3.同时向前和向后填充（both）:
动画开始前应用开始时的状态，结束后保留结束时的状态。
```css
div
{
width:
150px;
height:
200px;
position:
relative;
background:
red;
animationname:
myanim;
animationduration:
2s;
animationfillmode:
both;
}
@keyframes
myanim
{
from
{
left:
0px;
backgroundcolor:
green;
}
to
{
left:
200px;
backgroundcolor:
blue;
}
}
```
默认情况下，`animationfillmode`的值为`none`，意味着动画前后元素恢复到原始状态。通过设置不同的`animationfillmode`值，您可以控制动画对元素样式的影响范围。
