在CSS3中，我們可以使用animation-fill-mode屬性定義在動畫開始之前和動畫結束之後發生的事情。
語法：
animation-fill-mode:取值;
說明：
animation-fill-mode屬性取值如下：
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 animation-fill-mode屬性</title>
<style type="text/css">
@-webkit-keyframes mytranslate
{
0%{}
100%{-webkit-transform:translateX(100px);}
}
div:not(#container)
{
width:40px;
height:40px;
border-radius:20px;
background-color:red;
-webkit-animation-name:mytranslate;
-webkit-animation-timing-function:linear;
-webkit-animation-duration:2s;
}
#div2
{
-webkit-animation-fill-mode:forwards;
}
#div3
{
-webkit-animation-fill-mode:backwards;
}
#div4
{
-webkit-animation-fill-mode:both;
}
#container
{
display:inline-block;
width:140px;
border:1px solid silver;
}
</style>
</head>
<body>
<div id="container">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
一般情況下，對於animation-fill-mode屬性，我們只會用到forwards和backwards這兩個屬性值。而對於如何理解“animation-fill-mode:both;”，可以找度娘親熱一下，反正這個屬性值也沒什麼卵用。