How to realize CSS3 Animation
This article mainly explains "how to realize CSS3 animation". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "how to achieve CSS3 animation"!
What is CSS3 Animation?
Animation is the effect of gradually changing elements from one style to another.
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
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;}
}
@-webkit-keyframes myfirst / * Safari and Chrome * /
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
Example
Change the 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;}
}
@-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;}
}
At this point, I believe you have a deeper understanding of "how to achieve CSS3 animation". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!
