Animation effects in CSS3-Day72_html/css_WEB-ITnose

Do you still remember that I have implemented "using only CSS to make divs move" before? Do you still remember how it was implemented at that time? Yes, transition is also more targeted. The limitations are only the rotation angle, length and width, so it is more like a transition than a movement. Of course, it also has a limitation. It can only be triggered when the mouse is placed. When one style changes to another style, the change is relatively monotonous. To truly achieve animation effects, there is a very effective method in CSS3: @keyframes.

First of all, you need to know its specifications and usage

Do you still remember the usage of transition: add div{transition: width (height, transform) 5s; width: 100px; in the initial style; }, and then div:hover{width: 300px}, this is how to achieve the transition effect, so what about the animation?

The animation here is first depict the overall effect of the animation, and then bind the objects that implement the animation

Here is an example modified from w3cschool for recording. :

@keyframes myfirst{0%   {background: red; left:0px; top:0px;}25%  {background: yellow; left:200px; top:0px;transform:rotate(100deg);}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;transform:rotate(100deg);}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 和 Chrome */{0%   {background: red; left:0px; top:0px;}25%  {background: yellow; left:200px; top:0px;transform:rotate(100deg);}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:0pxl;transform:rotate(100deg);}50%  {background: blue; left:200px; top:200px;}75%  {background: green; left:0px; top:200px;}100% {background: red; left:0px; top:0px;}}

Find another object to bind. Do you find any problem with this object? Left and top are used to describe the distance. It must be absolute position, so let’s write the html part

 <div style="width:100px;height:100px;position:absolute;"></div>

and then bind it:

div{animation: myfirst 5s;-moz-animation: myfirst 5s;	/* Firefox */-webkit-animation: myfirst 5s;	/* Safari 和 Chrome */-o-animation: myfirst 5s;	/* Opera */-moz-animation-iteration-count: 4;}

General stepsWe understand this, 1: First make sure that the "animation effect" has been completed; 2. Find the object to achieve the animation effect; 3. Bind the animation effect to the object to be implemented, as follows That’s all.

But there is one thing we need to pay attention to. It cannot be achieved by binding casually. This binding is conditional , so what are the conditions?

1. Determine which animation effect is bound, 2. How long it takes to realize the animation effect. If you don’t write it, it will default to not running;

Of course this is the most basic requirement , and in order to achieve better animation effects , we can also set the following attributes:

1. animation-iteration-count, set the number of times the set animation effect is executed. , one thing to be clear here is that after all the times have been run, it will still disappear

2. animation-direction, how to achieve the animation effect, whether it is normal or reverse order;

3 , animation-play-state, the running effect of the animation, whether it is paused or running;

4. animation-delay, when the animation starts running

, etc., through these properties, we can better Have you realized your own animation effect in a personalized way?

I have seen so much css3 without knowing it. I should summarize the related content this weekend. Okay, I’ll study some places I haven’t seen yet in the past few days