css animation-fill-mode attribute
Translation results：
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 attributesyntax
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 attributeexample
<!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