Animation
Use shorthand attributes to change Animation and div element binding:
div
{
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
}
Internet Explorer 10, Firefox and Opera support the animation property.
Safari and Chrome support the alternative -webkit-animation attribute.
Note: Internet Explorer 9 and earlier versions do not support the animation property.
Definition and usage
The animation attribute is a shorthand attribute, used to set six animation attributes:
- animation-name
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction< /li>
< li>animation-duration
Note: Please always specify the animation-duration attribute, otherwise the duration is 0 and the animation will not play.
| Default value: | none 0 ease 0 1 normal |
|---|---|
| Inheritance: | no |
| Version: | CSS3 |
| JavaScript syntax: | object.style.animation=”mymove 5s infinite” |
Syntax
animation: name duration timing-function delay iteration-count direction;
| value | description |
|---|---|
| animation-name | specifies the keyframe name that needs to be bound to the selector. . |
| animation-duration | Specify the time it takes to complete the animation, in seconds or milliseconds. |
| animation-timing-function | Specifies the speed curve of the animation. |
| animation-delay | specifies the delay before the animation starts. |
| animation-iteration-count | specifies the number of times the animation should be played. |
| animation-direction | specifies whether the animation should be played in reverse in turn. |
@keyframes rule
Example
Make the div element down at a constant speed Move:
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
@-moz-keyframes mymove /* Firefox */
{
from {top:0px;}
to {top:200px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */ {from {top:0px;} to {top:200px;}} @-o-keyframes mymove /* Opera */ {from {top:0px;} to {top:200px;} }
With the @keyframes rule, you can create animations.
The principle of creating animation is to gradually change one set of CSS styles into another set of styles.
During the animation process, you can change this set of CSS styles many times.
Specify the time 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 time of the animation, and 100% is the end time of the animation.
For the best browser support, you should always define 0% and 100% selectors.
Note: Please use animation properties to control the appearance of the animation, and bind the animation to the selector at the same time.
@keyframes animationname {keyframes-selector {css-styles;}}
| Value | Description |
|---|---|
| animationname | Required. Define the name of the animation. |
| keyframes-selector |
Required. The percentage of animation duration. Legal value:
|
| css-styles |
Required. One or more valid CSS style attributes. |
Example 1
Add multiple keyframe selectors to an animation:
@keyframes mymove
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
@-moz-keyframes mymove /* Firefox */
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */ {0% {top:0px;} 25% {top:200px;} 50% {top:100px;} 75% {top:200px;} 100% {top:0px;}} @-o-keyframes mymove /* Opera */ {0% {top:0px;} 25% {top: 200px;} 50% {top:100px;} 75% {top:200px;} 100% {top:0px;}}
Example 2
Change multiple CSS styles in one animation:
@keyframes mymove
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
@-moz-keyframes mymove /* Firefox */
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */ {0% {top:0px; background:red; width:100px;} 100% {top:200px; background :yellow; width:300px;}} @-o-keyframes mymove /* Opera */ {0% {top:0px; background:red; width:100px;} 100% {top: 200px; background:yellow; width:300px;}}
Example 3
With more Multiple keyframe selectors with a CSS style:
@keyframes mymove
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
@-moz-keyframes mymove /* Firefox */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
@-webkit-keyframes mymove /* Safari and Chrome */ {0% {top:0px; left:0px; background:red;} 25% {top:0px; left :100px; background:blue;} 50% {top:100px; left:100px; background:yellow;} 75% {top:100px; left:0px; background:green;} 100% {top:0px; left:0px ; background:red;}} @-o-keyframes mymove /* Opera */ {0% {top:0px; left:0px; background:red;} 25% {top:0px; left:100px; background:blue;} 50% {top:100px; left:100px; background:yellow;} 75% {top:100px; left:0px; background:green;} 100% {top:0px; left: 0px; background:red;} }
Example
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */ {from {background: red;} to {background: yellow;}} @-o-keyframes myfirst /* Opera */ {from {background: red;} to {background: yellow;} }
CSS3 Animation
When you create an animation in @keyframes, please bind it to a certain selector, otherwise the animation will not be produced.
The animation can be bound to the selector by specifying at least two of the following CSS3 animation properties:
- Specify the name of the animation
- Specify the animation Duration of
Example
Binding the “myfirst” animation to the div element, duration: 5 seconds:
div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari and Chrome */ -o-animation: myfirst 5s; /* Opera */ }< /span>
Note: You must define the name and duration of the animation. If the duration is omitted, animation will not be allowed because the default value is 0.
Example
Change the background color when the animation is 25% and 50%, and then change it again when the animation is 100% complete:
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */ {0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;}} @-o-keyframes myfirst /* Opera */ {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;}
}
@-moz-keyframes myfirst /* Firefox */
{
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 and 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;}} @-o-keyframes myfirst /* Opera */ {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 table below Out of the @keyframes rule and all animation attributes:
| Attributes | Description | CSS
th> |
|---|---|---|
| @keyframes | Specify animation. | 3 |
| animation | Shorthand for all animation properties, except for the animation-play-state property. | 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. The default is 0. | 3 |
| animation-timing-function | Specifies the speed curve of the 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 is played in the reverse direction 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 |
| animation-fill-mode | Specify the state outside the animation time of the object. | 3 |
Example
Run the animation named myfirst, in which all animation properties are set:< /p>
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;
/* Firefox: */
-moz-animation-name: myfirst;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-play-state: running;
/* Safari and 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; /* Opera : */ -o-animation-name: myfirst; -o-animation-duration: 5s; -o-animation-timing-function: linear; -o-animation-delay: 2s; -o-animation-iteration-count: infinite; -o-animation-direction: alternate; -o-animation-play-state: running; }
Example
Same as the animation above, but using the abbreviated animation animation attribute:
div
{
animation: myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;
/* Safari and Chrome: */ -webkit-animation: myfirst 5s linear 2s infinite alternate; /* Opera: */ -o-animation : myfirst 5s linear 2s infinite alternate; }