animation
英 [ˌænɪˈmeɪʃn] 美 [ˌænəˈmeʃən]
n.生气，活泼;动画片制作，动画片摄制;[影视]动画片
复数： animations
fill
英 [fɪl] 美 [fɪl]
vt.& vi.（使）充满，（使）装满
vt.满足;配药;（按订单）供应;使充满（感情）
n.填满…的量;充分;装填物;路堤
第三人称单数： fills 复数： fills 现在分词： filling 过去式： filled 过去分词： filled
mode
英 [məʊd] 美 [moʊd]
n.方式;状况;时尚，风尚;调式
复数： modes
css3 animation-fill-mode属性 语法
作用：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>
<p><strong>注意：</strong>Internet Explorer 9 及其之前的版本不支持 animation-fill-mode 属性。</p>
<div></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例