animation-fill-mode
You can specify the state of the element before and after the 'animation' plays. Note that "before the animation starts" refers to the period during which the animation is delayed by 'animation-delay'.
Depending on the browser version, vendor prefixes such as 'webkit', 'moz', 'ms', etc. may be required for this property to work. It is recommended to include vendor prefixes when using this property. Also note that animations may stutter on lower-spec PCs.
Sample Code
div {
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
}
Available Values
| Value | Description |
|---|---|
| none | Does not apply the animation styles before or after the animation plays. This is the default value. |
| forwards | The state at the end of the animation is maintained. Normally, this is the style specified at '100%' or 'to'. * If reverse playback is set with 'animation-direction', the style at '0%' or 'from' is applied. |
| backwards | Before the animation plays, the element takes on the first value specified in the animation. Normally, this is the style specified at '0%' or 'from'. * If reverse playback is set with 'animation-direction', the style at '100%' or 'to' is applied. |
| both | Applies both 'forwards' and 'backwards' behaviors. |
Browser Result
The following samples set the animation iteration count to 3. To see the animation again, refresh your browser.
div {
background: #f00;
width: 200px;
animation: hogeanime1 3s 3;
-webkit-animation: hogeanime1 3s 3;
-moz-animation: hogeanime1 3s 3;
-ms-animation: hogeanime1 3s 3;
animation-fill-mode: none;
-webkit-animation-fill-mode: none;
-moz-animation-fill-mode: none;
-ms-animation-fill-mode: none;
}
@keyframes hogeanime1 {
0% { width: 200px;}
100% { width: 400px;}
}
@-webkit-keyframes hogeanime1 {
0% { width: 200px;}
100% { width: 400px;}
}
@-moz-keyframes hogeanime1 {
0% { width: 200px;}
100% { width: 400px;}
}
@-ms-keyframes hogeanime1 {
0% { width: 200px;}
100% { width: 400px;}
}
div {
background: #f00;
width: 200px;
animation: hogeanime1 3s 3;
-webkit-animation: hogeanime1 3s 3;
-moz-animation: hogeanime1 3s 3;
-ms-animation: hogeanime1 3s 3;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
}
@keyframes hogeanime1 {
0% { width: 200px;}
100% { width: 400px;}
}
@-webkit-keyframes hogeanime1 {
0% { width: 200px;}
100% { width: 400px;}
}
@-moz-keyframes hogeanime1 {
0% { width: 200px;}
100% { width: 400px;}
}
@-ms-keyframes hogeanime1 {
0% { width: 200px;}
100% { width: 400px;}
}
div {
background: #f00;
width: 300px;
animation: hogeanime1 3s 2s 3;
-webkit-animation: hogeanime1 3s 2s 3;
-moz-animation: hogeanime1 3s 2s 3;
-ms-animation: hogeanime1 3s 2s 3;
animation-fill-mode: backwards;
-webkit-animation-fill-mode: backwards;
-moz-animation-fill-mode: backwards;
-ms-animation-fill-mode: backwards;
}
@keyframes hogeanime1 {
0% { width: 200px;}
100% { width: 400px;}
}
@-webkit-keyframes hogeanime1 {
0% { width: 200px;}
100% { width: 400px;}
}
@-moz-keyframes hogeanime1 {
0% { width: 200px;}
100% { width: 400px;}
}
@-ms-keyframes hogeanime1 {
0% { width: 200px;}
100% { width: 400px;}
}
div {
background: #f00;
width: 300px;
animation: hogeanime1 3s 2s 3;
-webkit-animation: hogeanime1 3s 2s 3;
-moz-animation: hogeanime1 3s 2s 3;
-ms-animation: hogeanime1 3s 2s 3;
animation-fill-mode: both;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
}
@keyframes hogeanime1 {
0% { width: 200px;}
100% { width: 400px;}
}
@-webkit-keyframes hogeanime1 {
0% { width: 200px;}
100% { width: 400px;}
}
@-moz-keyframes hogeanime1 {
0% { width: 200px;}
100% { width: 400px;}
}
@-ms-keyframes hogeanime1 {
0% { width: 200px;}
100% { width: 400px;}
}
Browser Support
Chrome43+ ○
42 △41 △40 △39 △38 △37 △36 △35 △
2 and earlier ×
Firefox16+ ○
15 △14 △13 △12 △11 △10 △9 △8 △4 and earlier ×
Safari9+ ○8 △
7 △6 △5 △4 and earlier ×
Edge12+ ○
IE11 ○10 ○9 ×
8 ×7 ×
6 ×
Opera30+ ○29 △28 △27 △26 △25 △24 △23 △22 △29 △28 △27 △26 △25 △24 △23 △22 △
11 and earlier ×
iOS Safari9+ ○8 △7 △6 △5 △4 △3 and earlier ×
Android Browser43+ ○4.4 △3 and earlier × Chrome AndroidLatest ○ Firefox AndroidLatest ○When using the 'animation' property, you must also define '@keyframes' separately. Please note that the animation will not work without '@keyframes'.
To write '@keyframes', write '@keyframes' followed by an arbitrary 'animation name', then enclose the content in '{}'. Inside, define property changes according to the progress state between '0%' and '100%'. '0%' represents the start and '100%' represents the end. You can also use 'from' instead of '0%' and 'to' instead of '100%', but using '%' is more common.
/* Enclose the content in '{}' and define the timing and state of changes inside. */
@keyframes hogeanime1 {
0% { width: 200px;}
50% { width: 300px;}
100% { width: 400px;}
}
@-webkit-keyframes hogeanime1 {
0% { width: 200px;}
50% { width: 300px;}
100% { width: 400px;}
}
@-moz-keyframes hogeanime1 {
0% { width: 200px;}
50% { width: 300px;}
100% { width: 400px;}
}
@-ms-keyframes hogeanime1 {
0% { width: 200px;}
50% { width: 300px;}
100% { width: 400px;}
}
If you find any errors or copyright issues, please contact us.
シェアする