Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how to define the time of transition animation in css3". The editor shows you the operation process through actual cases. The method of operation is simple and fast, and it is practical. I hope that this article "how to define the time of transition animation in css3" can help you solve the problem.

In css3, you can use the transition-duration property to define the time of the transition animation, which specifies the time (in seconds or milliseconds) it takes to complete the transition effect, and sets the syntax to "transition-duration: time;".

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

In css3, you can use the transition-duration property to define the time of the transition animation.

Introduction to transition

Transition presents a kind of transition and a process of animation transformation, such as gradual appearance, weakening, animation speed and so on.

The transition function of CSS3 transition is more like "butter", triggering a smooth transition through some simple actions of CSS.

1. Transition attribute (transition-property) defines the name of the CSS attribute for the conversion animation

IDENT: specified CSS properties (width, height, background-color attributes, etc.)

All: specifies the style in which all elements support the transition-property attribute. All is usually used for convenience.

two。 The time required for the transition (transition-duration) defines the length of time to convert the animation

That is, the time spent from setting the old property to replacing the new property in seconds (s)

3. Transition animation function (transition-timing-function)

Specify the transition speed of the browser and the progress of the operation during the transition, and specify the speed of the animation by adding a function to the transition

Common transition animation ease: speed from fast to slow (default) linear: speed constant speed (uniform motion) ease-in: speed is getting faster (fade effect) ease-out: speed is getting slower and slower (fade effect) ease-in-out: speed accelerates first and then slows down (fade effect)

4. Transition delay time (transition-delay)

Specify the time when an animation starts to execute, and how long it takes to perform the transition effect after changing the element attribute value

Positive value: the element transition effect will not be triggered immediately, but will not be triggered until the set time value has passed.

Negative value: the element transition effect will be displayed from this point in time, and the previous action will be truncated.

0: default value, the element transition effect is executed immediately

Transition-property uses div {background-color: red; width: 200px; height: 200px; / * specify the CSS attribute transition time of animation transition * / transition: background-color 2s ease-in-out 3s;-moz-transition: background-color 2s ease-in-out 3s -webkit-transition: background-color 2s ease-in-out 3s;-o-transition: background-color 2s ease-in-out 3s;} div:hover {background-color: yellow;}

The trigger mechanism of transition

If there is no mouse movement effect to trigger the transition, in fact, div will not have any change. Pseudo-class hover is one of the trigger transition mechanisms. What other triggering methods are there?

Pseudo-class triggers:: hover,: active,: focus, checked, etc.

Media query: determine the size and direction of the device through the @ medium attribute.

JavaScript trigger: triggered with a JavaScript script.

Here is a summary of the steps to use transition to implement transition animation:

(1) declare the initial state style of the element in the default style.

(2) declare the final state style of transition elements, such as suspended state.

(3) add some different styles in the default style by adding a transition function.

This is the end of the introduction on "how to define the time of transition animation in css3". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.