css simple animation (transition attribute)

First, the understanding of the transition properties

1, transition attribute is a shorthand property, the transition can be used to set the four properties:
Transition-Property name transition effects CSS properties (height, width, opacity, etc.).
transition-duration effect will take time to complete the transition.
transition-timing-function effects a predetermined speed speed profile.
When the transition effect starts transition-delay (delay time).
Note: If the length of transition-duration property is 0, no transitions.

2, the gradient value of the function:

Function is a gradient-timing- Transition function;
Wherein the predetermined value of the Bezier curve
    ease gradually fast, uniform, slow Cubic -bezier ( 0.25 , 0.1 , 0.25 , 1 )
    EASE -IN gradually fast, uniform-Bezier Cubic ( 0.42 , 0 , . 1 , . 1 )
    EASE -out uniform, slow-Bezier Cubic ( 0 , 0 , 0.58 , . 1 )
    ease - in -out ease and the like, but larger than the ease of acceleration (large amplitude) Cubic Bezier-( 0.42 , 0 , 0.58 , . 1 )
    full uniform linear Cubic -bezier ( 0 , 0 , . 1 , . 1 )

 

3, a shorthand way: transition: css name attribute grading function over the time value of the delay time;

Second, the simple animation example operation

1, first insert two pictures

<div class="A">
        <img src="img/吃药.jpg" alt="">
        <img src="img/main_bg.jpg" alt="">
    </div>

2, set the style to 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 resulting animation is: