animation-name
You can specify the animation name (keyframes name) for the animation you want to run. The animation content is defined using '@keyframes'.
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-name: hogeanime1;
-webkit-animation-name: hogeanime1;
-moz-animation-name: hogeanime1;
-ms-animation-name: hogeanime1;
}
Browser Result
div {
background: #f00;
width: 200px;
animation-name: hogeanime1;
-webkit-animation-name: hogeanime1;
-moz-animation-name: hogeanime1;
-ms-animation-name: hogeanime1;
animation-duration: 3s;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
-ms-animation-duration: 3s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
}
@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 △3 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 △2 and earlier ×
Android Browser43+ ○4.4 △3 and earlier × Chrome AndroidLatest ○ Firefox AndroidLatest ○Overview
You can specify the animation by its animation name (keyframes name). The animation content is defined using '@keyframes'.
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;}
}
You can specify multiple animation names (keyframes names) simultaneously by separating the 'animation-name' values with ','.
div {
background: #f00;
width: 200px;
animation-name: hogeanime1, hogeanime2;
-webkit-animation-name: hogeanime1, hogeanime2;
-moz-animation-name: hogeanime1, hogeanime2;
-ms-animation-name: hogeanime1, hogeanime2;
animation-duration: 3s, 2s;
-webkit-animation-duration: 3s, 2s;
-moz-animation-duration: 3s, 2s;
-ms-animation-duration: 3s, 2s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
}
@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;}
}
@keyframes hogeanime2 {
0% { background: #f00;}
100% { background: #ff0;}
}
@-webkit-keyframes hogeanime2 {
0% { background: #f00;}
100% { background: #ff0;}
}
@-moz-keyframes hogeanime2 {
0% { background: #f00;}
100% { background: #ff0;}
}
@-ms-keyframes hogeanime2 {
0% { background: #f00;}
100% { background: #ff0;}
}
If you find any errors or copyright issues, please contact us.
シェアする