How to create Animation with animation of Css
Most people do not understand the knowledge points of this article "how to use Css's animation to create animation", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to use Css animation to create animation" article.
With css3, we can create animations, which can replace animated pictures, Flash animations, and JavaScript in many web pages.
CSS3 @ keyframes Rule
To create an animation in CSS3, you need to learn the @ keyframes rule.
The @ keyframes rule is used to create an animation. By specifying a CSS style in @ keyframes, you can create animation effects that gradually change from the current style to the new style.
So how to use the animation animation revision background and location of Css, the code is as follows:
@ 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;}
}
The above is about the content of this article on "how to create animation with Css's animation". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.
