English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
CSS3 animation-fill-The mode attribute specifies how the style is applied to the target before and after the CSS animation is executed.
The following table summarizes the usage context and version history of this attribute.
| Default value: | none |
|---|---|
| Applies to: | All elements ::before and ::after Pseudo-element |
| Inheritance: | None |
| Animated by: | No.See also: Animation properties. |
| Version: | CSS3New feature of |
| JavaScript syntax: | object.style.animationFillMode="forwards" |
The syntax of this attribute is as follows:
animation-fill-mode: none | forwards | backwards | both | initial | inherit
The following example demonstrates how to use the animation-fill-mode attribute.
.box {
width: 50px;
height: 50px;
background: red;
position: relative;
/* Chrome, Safari, Opera */
-webkit-animation-name: moveit;
-webkit-animation-duration: 4s;
-webkit-animation-fill-mode: forwards;
animation-name: moveit;
animation-duration: 4s;
animation-fill-mode: forwards;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes moveit {
from {left: 0;}
to {left: 50%;}
}
@keyframes moveit {
from {left: 0;}
to {left: 50%;}
}Test and see‹/›The following table describes the values of this attribute.
| Value | Description |
|---|---|
| none | The animation will not apply any styles to the target before or after it is executed. |
| forwards | After the animation ends (determined byanimation-iteration-count). The animation will apply the attribute values at the end of the animation. |
| backwards | The animation will apply the attribute values defined in the keyframes, which will be determined byanimation-delayThe first iteration of the animation starts within the time period defined by the attribute. These are the values of the from keyframe (animation-directionFor normal or alternate) or to the value of the keyframe (animation-directionFor reverse or alternate-reverse). |
| both | The animation will follow the rules of forward and backward, thus expanding the animation properties in both directions. |
| initial | Set this attribute to its default value. |
| inherit | If specified, the associated elements adopt the parent element's animation-fill-The calculated value of mode attribute. |
animation-fill-The compatibility of mode attribute across browsers, all major browsers support this attribute.
|
Please refer to the following tutorials:CSS3Animation.
Relative attributes and rules: animation,animation-name,animation-duration,animation-timing-function,animation-delay,animation-iteration-count,animation-direction,animation-play-state,@keyframes.