animation-fill-mode属性是用于当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式，即其动画效果是否可见。
CSS3 animation-fill-mode属性
作用：animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见。
说明：默认情况下，CSS 动画在第一个关键帧播放完之前不会影响元素，在最后一个关键帧完成后停止影响元素。animation-fill-mode 属性可重写该行为。
语法：
animation-fill-mode : none | forwards | backwards | both;
none：不改变默认行为。
forwards： 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both：向前和向后填充模式都被应用。
注：Internet Explorer 9 以及更早的版本不支持 animation-fill-mode 属性。
CSS3 animation-fill-mode属性的使用示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 3s;
animation-iteration-count:2;
animation-fill-mode:forwards;
/* Safari 和 Chrome */
-webkit-animation:mymove 3s;
-webkit-animation-iteration-count:2;
-webkit-animation-fill-mode:forwards;
}
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
@-webkit-keyframes mymove /* Safari 和 Chrome */
{
from {top:0px;}
to {top:200px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>效果图：
以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。更多精彩内容大家可以关注php中文网相关教程栏目！！！
Atas ialah kandungan terperinci animation-fill-mode属性怎么用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
tutorial css3
Apakah sifat kecerunan css3?
Bagaimana untuk menyelesaikan masalah bahawa Apple tidak boleh memuat turun lebih daripada 200 fail
Perbezaan antara xdata dan data
Bahasa Komputer
Perbezaan antara pelayan dan hos awan
Di manakah PR fade in dan fade out effect?
Cara menggunakan setrequestproperty
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
