animation

英[ˌænɪˈmeɪʃn] 美[ˌænəˈmeʃən]

n. Angry, lively; cartoon production, cartoon shooting; [film and television] animation

Plural: animations

fill

英[fɪl] 美[fɪl]

vt.& vi. (to make) full , (to make) full

vt. to satisfy; to prepare medicine; (to order) to supply; to make full of (feeling)

n.to fill...the amount of; to be sufficient; to fill; to embankment

Third person singular: fills Plural: fills Present participle: filling Past tense: filled Past participle: filled

mode

英[məʊd] 美[ moʊd]

n. way; condition; fashion, fashion; mode

plural: modes

css3 animation-fill-mode property syntax

Function:The animation-fill-mode attribute specifies whether the animation effect is visible before or after the animation is played.

Syntax: animation-fill-mode: none | forwards | backwards | both;

Description: none does not change the default behavior . forwards When the animation is complete, keep the last property value (defined in the last keyframe). backwards applies the start property value (defined in the first keyframe) before the animation is displayed for a period of time specified by animation-delay. Both forward and backward fill modes are applied.​

Note: Internet Explorer 9 and earlier versions do not support the animation-fill-mode attribute.

css3 animation-fill-mode property example

<!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>

Run instance »

Click the "Run instance" button to view the online instance