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

css animation-fill-mode attribute syntax

What does animation-fill-mode mean?

animation-fill-mode is an animation property of CSS, which is used to specify whether the animation effect will be before or after the animation is played. visible.

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.

css animation-fill-mode attribute 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