animation-timing-function
You can change the timing and rate of change for the animation. The available values are the same as 'transition-timing-function'.
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-timing-function: ease;
-webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease;
-ms-animation-timing-function: ease;
}
Available Values
| Value | Description |
|---|---|
| ease | Smooths the motion near the start and end. If 'animation-timing-function' is omitted, 'ease' is used as the default. |
| linear | Changes at a constant speed. |
| ease-in | Eases the motion near the start. |
| ease-out | Eases the motion near the end. |
| ease-in-out | Eases the motion near both the start and end. |
Browser Result
div {
background: #f00;
width: 200px;
animation: hogeanime1 3s ease infinite alternate;
-webkit-animation: hogeanime1 3s ease infinite alternate;
-moz-animation: hogeanime1 3s ease infinite alternate;
-ms-animation: hogeanime1 3s ease infinite alternate;
}
@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 linear infinite alternate;
-webkit-animation: hogeanime1 3s linear infinite alternate;
-moz-animation: hogeanime1 3s linear infinite alternate;
-ms-animation: hogeanime1 3s linear infinite alternate;
}
@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 ease-in infinite alternate;
-webkit-animation: hogeanime1 3s ease-in infinite alternate;
-moz-animation: hogeanime1 3s ease-in infinite alternate;
-ms-animation: hogeanime1 3s ease-in infinite alternate;
}
@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 ease-out infinite alternate;
-webkit-animation: hogeanime1 3s ease-out infinite alternate;
-moz-animation: hogeanime1 3s ease-out infinite alternate;
-ms-animation: hogeanime1 3s ease-out infinite alternate;
}
@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 ease-in-out infinite alternate;
-webkit-animation: hogeanime1 3s ease-in-out infinite alternate;
-moz-animation: hogeanime1 3s ease-in-out infinite alternate;
-ms-animation: hogeanime1 3s ease-in-out infinite alternate;
}
@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
Desktop
Chrome43+ ○
42 △41 △40 △39 △38 △37 △36 △35 △Requires '-webkit-' prefix
2 and earlier ×
Firefox16+ ○
15 △14 △13 △12 △11 △10 △9 △8 △Requires '-moz-' prefix
4 and earlier ×
Safari9+ ○8 △
7 △6 △5 △4 △Requires '-webkit-' prefix
3 and earlier ×
Edge12+ ○Supported in all versions.
IE11 ○10 ○9 ×
8 ×7 ×
6 ×
Opera30+ ○29 △28 △27 △26 △25 △24 △23 △22 △Requires '-webkit-' prefix
29 △28 △27 △26 △25 △24 △23 △22 △Requires '-o-' prefix
11 and earlier ×Mobile
iOS Safari9+ ○8 △7 △6 △5 △4 △Requires '-webkit-' prefix
2 and earlier ×
Android Browser43+ ○4.4 △Requires '-webkit-' prefix
3 and earlier × Chrome AndroidLatest ○Same support as desktop version.
Firefox AndroidLatest ○Same support as desktop version.
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.
シェアする