About the transition and animation differences introduced in CSS3

* * For a long time project, transition and animation two CSS3 properties are often used in the actual project, think of it to sort out. As follows:

1: First Introduce transition:

A, in the project often encounter such a situation, such as a button, when the mouse moved in to change the button background color and font color, we usually do this:

. btn{width:80px;height:25px;border:1px solid #333; color: #333; text-align:center;line-height:25px;}. btn:hover{ Background:green;color:white;}

B, we will find that the background and the color of the font is instantaneous change, it will appear particularly stiff

At this time transition on the debut, see the Code:

. btn{width:80px;height:25px;border:1px solid #333; color: #333; text-align:center;line-height:25px;}. btn:hover{ background:green;color:white;transition:0.4s;}

C, after adding transition we will find that the button background color and font color have a time-gradual process, until the end.

How does this progression come about, yes, 0.4s,

Talking about 0.4s, it is necessary to pull the various attributes of the transition, I do not intend to write in detail in the blog, because it is entirely possible to consult their own information.

(1: The 0.4s above is a shorthand for one of the transition properties: transition-duration

Transition-duration, as the name implies, indicates the duration of the animation, which is the 0.4s above. Animate the background color and font color in 0.4 seconds.

(2: When it comes to the animation that lasts in 0.4 seconds, we're going to talk about how fast things are moving, and we know that the movement of a thing has these kinds:

(A linear: constant speed

(b ease-in: accelerating

(c Ease-out: Deceleration

(d cubic-bezier function: Custom speed mode (almost unused)

The above code simply writes transition:0.4s; Why is there a movement?

(3: This is the case, transition has a property called Transition-timing-function, the default is ease, the form of its movement is gradually slowing down.

Not shorthand is transition:0.4s ease

D, we see that after the button hover, all the changes in the CSS description in the hover style have the animation described in transition.

This sentence I explained a bit around the mouth, we directly on the code to explain it:

1) What do we do if we just want the background color to have a change in the time period?

transition:0.4s background ease-in

2) We see the background in the code above, yes, because it specifies that only the background color of the animation has this time period animation.

It is a shorthand for one of the properties of transition, called: Transition-property, as the name implies, specifies a property.

E, we will find in the actual project that sometimes we need an animation with a delayed presentation that doesn't want him to animate immediately

At this point, another attribute of transition came out, Transition-delay

See Code:

transition:0.4s 1s;

We will find that the background font animation for this button is not started until 1 seconds later.

----"Transition is easy to use, but we will find it subject to various restrictions.

1:transition requires an event to trigger, such as hover, so it can't happen automatically when the page loads

2:transition are disposable and cannot be repeated unless triggered repeatedly.

3:transition can only define the start and end states, and cannot define an intermediate state, that is, there are only two states.

4: A transition rule that can define only one property change and cannot involve multiple attributes.

(in order to express clearly, the above 4 restrictions are I quote Ruan a peak of the Great God Blog introduction)

In order to break through these restrictions, animation came out.

2:animation:

A), do not explain the animation of the properties of the first, we directly to showing code it

. c{width:100px;height:100px;margin:200px 0 300px 300px;background:orange;}        . C:hover{animation:2s change Infinite;}        @keyframes Change {            0% {background:orange;}            50% {background:pink;width:200px;}            100% {background:red;height:300px;}        }

The above code will produce this effect, see:

b), when the mouse is moved into p, p will be a series of changes in style (unable to show the process), in 2 seconds to complete the background color and width of the change, and no limit to repeat the two second animation, because of what?

c), I am prepared to make such an explanation at this time, you need to do a animation animation only need 3 points

1. You need an element that carries the animation, such as P

2. The current element writes a animation CSS, which defines the effect that you need to produce this animation. (You don't need to know how to write CSS inside this animation for the moment)

3. Write an animation process, defined by the @keyframes keyword, and the process of the animation has a name, such as change,

----------You can think of this process as a function, @keyframes corresponds to function, and the change corresponds to the name of the functions-----------"the final wait is called."

Well, understand the above three points, we can come to analyze the animation of the truth.

A) Let's look at this code again:

Animation:2s change Infinite; @keyframes Change {       0% {background:orange;}       50% {background:pink;width:200px;}       100% {background:red;height:300px;}}

1. Let's take a look at this "so-called function change"

(1): This change is animation one of the attributes, called Animation name-----"Animation-name:change;

2. Let's look at this "percentage" again.

(1): This percentage you just have to understand that it is the progress of the series of style changes that this animation has done in the amount of time. This progression you can describe the style attributes of this element you want to change (you can define a variety of)

(2): Of course, you can also write:

@keyframes Change {from            {background:orange;}            50% {background:pink;width:200px;}            to {background:red;height:300px;}}

3. After reading the animation process, now let's see how to invoke this animation: see the code:

. C:hover{animation:2s change Infinite;}

(1), witty you must have seen the 2s, yes, that is, it makes the animation 2 seconds to complete. Like transition, it's a property of animation,

Called: animation-duration:2s;

(2), witty you must have seen the change, yes, that's exactly what this "animation function" is called. Just write it in the CSS style of the current element animation.

(3), just before we said, this code will be moved into the P element after 2 seconds to complete the background color and width of the change, and no limit to repeat this two second animation

*: note See unlimited three characters,

*: No Limit how come? At this point the code is left with only infinite.

*: Don't think, he is animation one of the properties: called Animation-iteration-count:infinite;

*: This property is used to define how many times this animation should be played, infinite represents the unlimited (countless times), of course you can also play a fixed value of the number of times, such as 3 times

Animation-iteration-count:3;

Here, you just need to write the number of times in the CSS in animation:

. c:hover{animation:2s change 3;}

4: This animation has been introduced, but we will find that the animation will revert back to its original state after two seconds:

At this point we want to keep the animation in the end state after two seconds of execution, and this is what happens when another property of animation comes in handy.

-------------"Animation-fill-mode:forwards;

Here, you just need to write forwards in the CSS in animation:

. c:hover{animation:2s change 3 forwards;}

This will be the case when the 2-second animation ends:

5: Similarly, animation has the properties of the delay animation as well as the transition:

------------"ANIMATION-DELAY:1S;

The same animation shorthand, which means that the mouse moves in P, and after 1 seconds the animation starts

. c:hover{animation:2s 1s change 3 forwards;}

6: Similarly, animation has the same properties as the transition that animate at what speed: By default it is ease, and its movement is gradually slowing down.

------------------"Animation-timing-function:ease;

　　　　

(A linear: constant speed

(b ease-in: accelerating

(c Ease-out: Deceleration

(d cubic-bezier function: Custom speed mode (almost unused)

To change the motion situation just add the corresponding speed to represent the parameters, see the code:

. c:hover{animation:2s 1s change 3 forwards linear;}

7:animation also has a property I'm not going to write it down,--------"animation-direction, by default it's normal,

It is used to change the animation playback not only from the end state to jump back to the starting state of this form.

8: As stated above, the animation browser can automatically trigger a load:

. c{width:100px;height:100px;margin:200px 0 300px 300px;background:orange; animation:2s change forwards;}

* * At this point you will find that the browser runs this p to start the animation. As for when to trigger, it depends on the specific needs of the project.

Conclusion: Since then, CSS3 in the two major animation transition and animation introduced. If there is any mistake, please correct me.