About transition and animation in css3, css3transition

About transition and animation in css3, css3transition

** After a long project, the transition and animation css3 attributes are often used in actual projects. As follows:

 

1: first introduce transition:

A. This is often the case in projects. For example, when a button is moved in, the background color and font color of the button are changed. In this case, 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 font color change instantly. Will it seem so stiff?

Now transition is on the stage. 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：.4s;}

 

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

How does this gradual process come from? Yes, it's. 4 s (abbreviated as 0.4 s,

When talking about the 0.4 s, we need to talk about the various attributes of transition. Here I don't want to write them into the blog in detail, because I can check the information myself.

(1: The preceding 0.4s is short for one of the transition attributes:transition-duration

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

(2: When it comes to 0.4 seconds of continuous animation, we need to talk about the speed of object motion. We know that the motion of a thing has these types:

(A linear: constant speed

(B branch-in: acceleration

(C Release-out: deceleration

(D cubic-bezr function: Custom speed mode (almost unnecessary)

 

In the above Code, only transition: 0.4 s is written. Why is there a motion?

(3: this is the case. A transition attribute is calledtransition-timing-functionBy default, it is slow.

It istransition: 0.4s ease

 

D. We can see that after the button hover, all css descriptions in the hover style are animated as described by transition.

This sentence is a bit difficult to explain. Let's explain it through code:

1) What should we do if we only want to change the background color for a period of time?

transition: 0.4s background ease-in

2) We saw the background in the above Code. Yes, it is because it specifies an animation with only the background color for this time period.

It is short for one of the transition attributes, called:transition-property, As the name implies, specifying attributes.

 

E. In actual projects, we will find that sometimes we need an animation with a delay, and we don't want it to produce an animation immediately.

At this time, another attribute of transition is available,transition-delay

See the Code:

transition: 0.4s 1s;

We will find that the background font animation of this button starts in 1 second.

 

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

1: transition requires an event to be triggered, such as hover. Therefore, it cannot automatically occur during webpage loading.

2: The transition is one-time and cannot be repeated unless it is triggered repeatedly.

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

4: A transition rule. Only one attribute change can be defined, and multiple attributes cannot be involved.

 

(In order to express myself clearly, the above four restrictions are my reference to Ruan Yifeng's blog)

 

To break through these restrictions, animation came out.

 

2: animation:

A) Let's not explain the attributes of animation in detail. Let's look at the 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 the div, The div will undergo a series of style changes (the process cannot be expressed), and the background color and width and height changes will be completed in 2 seconds, there is no limit to repeating the two-second animation. Why?

 

C) I am going to explain this. At this time, you only need three points for an animation.

1. An animation-carrying element, such as div

2. Write an animation css for the current element, which defines the effect of the animation you need. (You do not need to know how to compile the css inside the animation)

3. Compile an animation process and define it with the @ keyframes keyword. The animation process has a name, such as change,

---------- You can understand this process as a function. @ keyframes corresponds to the function, and change corresponds to the function name -----------, which is finally waiting to be called.

 

Now that we understand the above three points, we can analyze the true face of animation.

 

A) let's take a look at this Code:

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

 

1. Let's first look at the so-called function change"

(1): This change is an attribute of animation, called the animation name -----"animation-name:change;

2. Let's look at this "percentage"

(1): You only need to understand the progress of a series of style changes completed by the animation within a certain period of time. You can describe the style attributes you want to change in this progress (you can define multiple attributes)

(2): Of course, you can write as follows:

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

 

3. After reading the animation production process, let's look at how to call this animation: see the code:

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

(1) wit, you must have seen 2 s. Yes, that is, it makes the animation complete in 2 seconds. Like transition, it is an attribute of animation,

It is called:animation-duration: 2s;

(2) You must have seen change. Yes, that is, calling this "animation function". You only need to write it in the css style of the current element animation.

 

(3) As we mentioned above, this code will complete the background color and width and height changes two seconds after moving the mouse into the div element, and will not repeat the animation for the two seconds.

*: Note that there are no limit to three words displayed,

*: No limit. How can this problem be solved? In this case, only infinite is available.

*: You don't need to think about it. It is also one of the attributes of animation:animation-iteration-count: infinite;

*: This attribute is used to define how many times the animation should be played. infinite represents unlimited (countless times). Of course, you can also make it play a set value several times, such as three times.

animation-iteration-count: 3;

Here, you only 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 be restored to its original state after two seconds (Initial State ):

Now we want to keep the animation in the end state after two seconds of execution. What should we do? In this case, another attribute of animation will be used.

-------------animation-fill-mode:forwards;

Here, you only need to write forwards in the css in animation:

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

After the animation ends in 2 seconds, it will look like this:

 

 

 

5: Similarly, animation has the property of a delayed animation like transition:

------------animation-delay: 1s;

The abbreviation of the same animation is as follows, indicating that the mouse is moved into the div, And the animation starts after 1 second.

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

 

6: Similarly, animation has the same speed as transition in which an animation is rendered. By default, animation is slow.

------------------animation-timing-function: ease;

　　　　

(A linear: constant speed

(B branch-in: acceleration

(C Release-out: deceleration

(D cubic-bezr function: Custom speed mode (almost unnecessary)

 

* *** To change the motion situation, you only need to add the corresponding speed parameter. For details, see the code:

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

 

7: I don't want to elaborate on another attribute of animation. --------> animation-direction, which is normal by default,

It is used to change the animation playback not only from the end state to the start state.

 

8: As mentioned above, the animation browser can be automatically triggered upon loading:

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

** At this time, you will find that the div is animated as soon as the browser runs. When to trigger the task, it depends on the specific requirements of the project.

 

Conclusion: since then, the two animations transition and animation in css3 have been introduced. If any error occurs, please correct it. If this article is helpful to you, please do not mean your likes ~