What is used to define the time of transition animation in css3-Front-end Q&A-php.cn

What is used to define the time of transition animation in css3

青灯夜游

Release： 2022-02-28 13:35:37

Original

5070 people have browsed it

In CSS3, you can use the transition-duration attribute to define the time of the transition animation. This attribute can specify the time it takes to complete the transition effect (in seconds or milliseconds). The setting syntax is "transition-duration: time;".

What is used to define the time of transition animation in css3

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

In CSS3, you can use the transition-duration attribute to define the time of the transition animation.

Transition Introduction

Transition presents a transition, a process of animation conversion, such as fade-in, fade-out, animation Wait quickly and slowly.

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

1. Transition property (transition-property) Defines the CSS property name of the transition animation

IDENT: Specified CSS property (width, height, background-color property, etc. )

all: Specify the style of all elements that support the transition-property attribute. Generally, all is used for convenience

2. The time required for transition (transition-duration) defines the transition animation The length of time

is the time it takes from setting the old properties to replacing the new properties, 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. Specify the speed of the animation by adding a function to the transition

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

4. Transition delay time (transition-delay)

Specify the time when an animation starts to execute, and how long it takes after changing the element attribute value To execute the transition effect
Positive value: The element transition effect will not be triggered immediately. It will be triggered after the set time value has passed
Negative value: The element transition effect will start to be displayed from this time point, and the previous action is truncated
0: Default value, the element transition effect is executed immediately

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>transition-property的使用</title>
    <style>
        div{
            background-color: red;
            width: 200px;
            height: 200px;
            /*指定动画过渡的CSS属性 过渡时间 过渡动画 延迟时间*/
            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;

        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

Copy after login

Transition triggering mechanism

If there is no mouse movement effect to trigger the transition, in fact, the div will not change at all. The pseudo-class hover is a kind of triggering transition mechanism. What other triggering methods are there?

Pseudo-class triggering: :hover, :active, :focus, checked, etc.
Media query: Determine the size, direction, etc. of the device through the @media attribute.
JavaScript trigger: Trigger with JavaScript script.

The following 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 the transition element, such as suspended state.

(3) Add some different styles by adding transition functions to the default style.

(Learning video sharing: css video tutorial, web front-end introductory tutorial)

The above is the detailed content of What is used to define the time of transition animation in css3. For more information, please follow other related articles on the PHP Chinese website!