The best CSS3 animations Tutorial In 2024, In this tutorial you can learn CSS3 animations,CSS3 @keyframes rules,Browser Support,Examples,CSS3 animations,Examples,What CSS3 animations are?,Examples,Examples,CSS3 animation properties,Examples,Examples,
CSS3, we can create animations which can replace many pages animated images, Flash animations, and JAVAScripts.
To create CSS3 animations, you will have to learn @keyframes rules.
@keyframes rule is to create animation. Specify a CSS style and animation will gradually change to the new style from the current style within @keyframes rules.
Figures in the table represent the first browser to support the version number of the property.
Immediately following the digital -webkit-, -ms- or -moz- ago in support of the prefix attribute first browser version number.
属性 | |||||
---|---|---|---|---|---|
@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- |
When creating animation @keyframes, bind it to a selector, otherwise the animation will have no effect.
Specify at least two CSS3 animation property is bound to a selector:
The "myfirst" animation tied to div element Duration: 5 seconds:
Note: You must define the duration of the animation and animation name.If you omit the duration of the animation will not run because the default value is 0.
Animation element is to make a gradual change from one style to another style effect.
You can change as many styles as many times.
Please use the percentage change in the prescribed time, or keyword "from" and "to", equivalent to 0% and 100%.
0% is the beginning of the animation, the animation is 100% complete.
For best browser support, you should always define the 0% and 100% of the selector.
Change the background color when the animation is 25% and 50%, and 100% complete when the animation changed again:
Change the background color and location:
The following table lists the @keyframes rules and all animation properties:
Attributes | description | CSS |
---|---|---|
@keyframes | Provisions animation. | 3 |
animation | Shorthand property for all the animation properties, in addition to animation-play-state property. | 3 |
animation-name | Specifies the name @keyframes animation. | 3 |
animation-duration | Provisions animation takes to complete a cycle of seconds or milliseconds. The default is 0. | 3 |
animation-timing-function | A predetermined speed of the animation curve. The default is "ease". | 3 |
animation-delay | When a predetermined animation starts. The default is 0. | 3 |
animation-iteration-count | Predetermined number of times the animation is played. The default is 1. | 3 |
animation-direction | Whether the provisions of the animation to play in reverse to the next cycle. The default is "normal". | 3 |
animation-play-state | Whether the provisions of the animation is running or paused. The default is "running". | 3 |
The following two examples set all animation properties:
Run myfirst animation, set all the attributes:
The animation above the same, but with a short animated animation properties: