animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见。
| none | 不改变默认行为。 |
| forwards | 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。 |
| backwards | 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。 |
| both | 向前和向后填充模式都被应用。 |
关于这三个，很好理解；具体请看demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<style>
*{margin: 0; padding: 0;}
.box{width: 100px; height: 100px; background: red; border-radius: 50%; opacity: 0.5; animation: paly 2s linear backwards }
@keyframes paly{
0%{-webkit-transform: scale(0.5,0.5);
-ms-transform: scale(0.5,0.5);
-o-transform: scale(0.5,0.5);
transform: scale(0.5,0.5);}
100%{
-webkit-transform:scale(0,0);
-ms-transform:scale(0,0);
-o-transform:scale(0,0);
transform:scale(0,0);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
这是一个大小匀速变化的圆，当animation的填充模式为backwards的时候，可以看到，小圆缩小后直至没有了，说明保持了最后一帧；当animation的填充模式为forwards的时候，则相反；当animation的填充模式为both的时候，第一帧和最后一帧都保留；
时间： 2024-10-10 16:56:47