Detailed explanation of the transition attribute of simple CSS animation

1. Understanding of transition attributes

1. The transition attribute is a shorthand attribute that can be used to set four transition properties:

transition-property The name of the CSS property for the transition effect (height, width, opacity, etc.).
transition-duration The time it takes to complete the transition effect.
transition-timing-function specifies the speed curve of a speed effect.
transition-delay When does the transition effect start (delay time).

Note: If the transition-duration property is 0, no transition effect will occur.

2. The value of the gradient function:

The gradient function is the transition-timing-function;

The preset value of the Bezier curve

Ease gradually increases, uniform speed, slows down cubic-bezier (0.25, 0.1, 0.25, 1)
ease-in gradually faster, uniform speed cubic-bezier (0.42, 0, 1, 1)
ease-out uniform speed, slow down cubic-bezier (0,0,0.58,1)
ease-in-out is similar to ease, but has a larger acceleration (larger amplitude) than ease. cubic-bezier(0.42,0,0.58,1)
Linear uniform speed throughout cubic-bezier (0,0,1,1)

3. Abbreviation: transition: css attribute name transition time gradient function value delay time;

2. Simple animation example operation

1. Insert two pictures first

<div class="A">
        <img src="img/taking medicine.jpg" alt="">
        <img src="img/main_bg.jpg" alt="">
    </div>

2. Set the style for the picture

<style>
        .A {
            margin: auto 100px;
            height: 400px;
            width: 600px;
            position: relative;
        }
        .A img:nth-child(1) {
            height: 300px;
            width: 300px;
            position: absolute;
        }
        .A img:nth-child(2) {
            height: 300px;
            width: 300px;
            position: absolute;
            transition: opacity 3s ease-in 2s;
        }
        .A img:nth-child(2):hover {
            opacity: 0;
        }
        img {
            height: 300px;
            width: 300px;
        }
        </style>

3. The animation effect obtained is:

Summarize

The above is a detailed explanation of the transition attribute of simple CSS animation introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!