CSS3 animation
To create CSS3 animations, you will have to understand the @keyframes rules.
@keyframes rule is to create animations. Specify a CSS style and animation within the @keyframes rule that will gradually change from the current style to the new style.
Browser support
The number in the table indicates the first browser version number that supports this attribute.
The number immediately before -webkit-, -ms- or -moz- is the first browser version number that supports this prefix attribute.
Example
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}
CSS3 animation
When creating animation in@keyframes, bind it to a selector, otherwise the animation will have no effect.
Specify that at least two CSS3 animation properties are bound to a selector:
Specify the name of the animation
Specify the duration of the animation
Instance
php中文网(php.cn) 注意: 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。
Run the instance»
Click the "Run Instance" button to view the online instance
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 as many styles as you want as many times as you like.
Please use percentage to specify the time when the change occurs, or use the keywords "from" and "to", which are equivalent to 0% and 100%.
0% is the start of the animation, 100% is the completion of the animation.
For best browser support, you should always define 0% and 100% selectors.
Instance
php中文网(php.cn) 注释：当动画完成时，会变回初始的样式。
注意: 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。
Run Instance»
Click the "Run Instance" button to view the online instance
Instance
php中文网(php.cn) 注意: 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。
Run Instance»
Click the "Run Instance" button to view the online instance
CSS3 animation properties
The following table lists the @keyframes rules and all animation properties:
| Properties | Description | CSS |
|---|---|---|
| @keyframes | Specifies animation. | 3 |
| animation | Shorthand property for all animation properties, except animation-play-state property. | 3 |
| animation-name | Specifies the name of @keyframes animation. | 3 |
| animation-duration | Specifies the seconds or milliseconds it takes for the animation to complete one cycle. The default is 0. | 3 |
| animation-timing-function | Specifies the speed curve of animation. The default is "ease". | 3 |
| animation-delay | Specifies when the animation starts. The default is 0. | 3 |
| animation-iteration-count | Specifies the number of times the animation is played. The default is 1. | 3 |
| animation-direction | Specifies whether the animation plays in reverse in the next cycle. The default is "normal". | 3 |
| animation-play-state | Specifies whether the animation is running or paused. The default is "running". | 3 |
The following two examples set all animation properties:
Example
php中文网(php.cn) 注意: 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。
Run Instance»
Click the "Run Instance" button to view the online instance
