Example Analysis of css Animation
This article mainly shows you the "sample analysis of css animation", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and study the "sample analysis of css animation" this article.
What is CSS3 animation?
Animation is the effect of gradually changing elements from one style to another. Using the @ keyframes rule, you can create animations.
When you create an animation in @ keyframes, bind it to a selector, otherwise the animation will have no effect.
Specify that the animation properties of at least two CSS3 are bound to one selector:
● specifies the name of the animation
● specifies the length of animation.
Browser support
The number in the table represents the first browser version number that supports the property.
The number immediately before-webkit-,-ms- or-moz- is the first browser version number that supports the prefix attribute.
1.png
@ keyframes rule
Grammar.
@ keyframesanimationname {keyframes-selector {css-styles;}}
Attribute value:
Required for ● animationname. Defines the name of the animation.
Required for ● keyframes-selector. The percentage of animation duration.
Legal value:
● 0-100%
● from (same as 0%)
● to (same as 100%)
Required for ● css-styles. One or more legitimate CSS style attributes
Description:
You can change as many styles as you want and 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 beginning of the animation and 100% is the completion of the animation.
For optimal browser support, you should always define 0% and 100% selectors.
Example of css Animation
Div
{
Width:100px
Height:100px
Background:red
Position:relative
Animation:mymove5sinfinite
-webkit-animation:mymove5sinfinite;/*SafariandChrome*/
}
@ keyframesmymove
{
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-keyframesmymove/*SafariandChrome*/
{
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;}
}
The above is all the content of this article "sample Analysis of css Animation". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
