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>

运行实例 »

点击 "运行实例" 按钮查看在线实例