CSS3 Animation
CSS3 animation
CSS3 can create animations that can replace many of the effects achieved by web animation images, Flash animations, and JavaScript.
CSS3 @keyframes rules
To create CSS3 animations, you need to understand the @keyframes rule.
The @keyframes rule is to create animations.
Specifying a CSS style within the @keyframes rule and animation will gradually change from the current style to the new style.
Browser support
The numbers in the table represent the first browser version number that supports the property.
The number immediately preceding -webkit-, -ms- or -moz- is the version number of the first browser that supports the prefixed attribute.
| Property |  |  |  |  |  |
|---|---|---|---|---|---|
| @keyframes | 43.0 4.0 -webkit- | 10.0 | 16.0 5.0 -moz- | 9.0 4.0 -webkit- | 30.0 15.0 -webkit- 12.0 -o- |
| animation | 43.0 4.0 -webkit- | 10.0 | 16.0 5.0 -moz- | 9.0 4.0 -webkit- | 30.0 15.0 -webkit- 12.0 -o- |
Example
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
from {background: red;}
to {background: yellow;}
}CSS3 animation
When creating an animation in @keyframes , bind it to a selector, otherwise the animation will not have any effect.
Specify at least two of these CSS3 animation properties to bind to a selector:
Specifies the name of the animation
Specifies the duration of the animation
Example
Bind the "myfirst" animation to the div element, duration: 5 seconds:
div
{
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari 与 Chrome */
}Note: You must define the name of the animation and the duration of the animation. If the duration is omitted, the animation will not run because the default value is 0.
What is CSS3 animation?
Animation is the effect of gradually changing an element from one style to another.
You can change any number of styles as many times as you like.
Please specify when the change occurs as a percentage, or use the keywords "from" and "to", which are equivalent to 0% and 100%.
0% is the start of the animation and 100% is the end of the animation.
For best browser support, you should always define 0% and 100% selectors.
Example
Change the background color when the animation is at 25% and 50%, then change it again when the animation is 100% complete:
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
Example
Change background color and position:
@keyframes myfirst
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}CSS3 animation properties
The following table lists @keyframes rules and all animation properties:
| Property | Description | CSS |
|---|---|---|
| @keyframes | Specifies animation. | 3 |
| animation | Shorthand property for all animation properties. | 3 |
| animation-name | Specifies the name of the @keyframes animation. | 3 |
| animation-duration | Specifies the seconds or milliseconds it takes for the animation to complete a cycle. Default is 0. | 3 |
| animation-timing-function | Specifies the speed curve for the animation. The default is "ease". | 3 |
| animation-fill-mode | Specifies the style to apply to the element when the animation is not playing (when the animation finishes, or when the animation has a delay before it starts playing). | 3 |
| animation-delay | Specifies when the animation should start. Default is 0. | 3 |
| animation-iteration-count | Specifies the number of times the animation is played. Default is 1. | 3 |
| animation-direction | Specifies whether the animation is played in reverse on the next cycle. Default is "normal". | 3 |
| animation-play-state | Specifies whether the animation is running or paused. Default is "running". | 3 |
The following two examples set all animation properties:
Example
Run the myfirst animation, setting all properties:
div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari 与 Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}
Example
Same animation as above, but using the shorthand animation animation property:
div
{
animation: myfirst 5s linear 2s infinite alternate;
/* Safari 与 Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
}