January 17, 2018 summary CSS3 transition and animation differences

Transition and animation two CSS3 properties are often used in real projects and want to sort them out.

1. First introduce transition

>>>>> A. In the project often encounter such a situation, such as a button, when the mouse moved into the revision button background color and font color. This is usually done outside:

. 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 the background and font color is an instant revision, is not particularly blunt

Now transition is on the scene.

. 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 world-gradual process until the end.

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

When it comes to 0.4s, it's going to be transition's properties.

1). The above. 4s 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 0.4s on the market. Complete background color and font color dynamics in 0.4 seconds

2). Design to 0.4 seconds of continuous animation, we will talk about the speed of the movement of objects, we know that a thing has the movement of these kinds:

A) Linear: constant speed

b) Ease-in: accelerating

c) Ease-out: deceleration

d) cubic-bezier function: Custom Speed mode

In the code above, simply write the transition:0.4s why does it have 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 Hove, all the changes in the CSS description in the hover style have the animation described in transition.

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 background in the above diam, yes, because it specifies that only the background color in the animation is animated.

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

E. We will find in the actual project, sometimes we need an animation with a delay of the presentation, do not want him to produce an animation immediately, at this time transition another attribute is out, Transition-delay

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 takes a time to trigger, such as hover, so it doesn'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, only two states

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

2.animation

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

. 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 moves into P, a series of style changes (unable to perform the process) in the 2 Second world to complete the background color and wide changes, and no limit to repeat this two second animation, I because of what?

c), I'm going to do this explanation, at this point you need to do a animation animation only 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 you need for 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

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

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

A) We'll look at this code again.

{       0% {background: orange;} {background: pink;           Width: 200px; }       { background: red;  Height: 300px; }}

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

(1) This change is a property of animation, called the animated name, Animation-name:change

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

(1), this percentage you just understand that it is the progression of a series of style changes that the animation has done in most of the time. This progress you can paint this element you want to revise the style attributes

(2) Of course you can also write:

{from            {background: orange;} {background: pink;                Width: 200px; }            { background: red;  Height: 300px; }}

3. After reading the animation process, now let's see if this animation is called:

. 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 is an attribute of a animation called Animation-duration:2s.

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

(3) Just before we said, this code will be moving the P element 2 seconds after the mouse to complete the background color and width changes, and no limit to repeat this two seconds of animation

*

January 17, 2018 summary CSS3 transition and animation differences