Css3 has two new animations

Transition and animation. Note that the first method is to use CSS hover pseudo-class property and the second method to change CSS property with JS. Css3’s new Transition solves this problem

Shorthand syntax
  // Abbreviate syntax
    transition: ginseng1 参2 参3 参4Property Specifies the name of the CSS property that sets the transition effect. Name Duration Specifies how many seconds or milliseconds it takes to complete the transition effect. Timing -functionSpecifies the speed curve effect for the speed effectdelayDefines when the transition effect starts to delayCopy the code
This is a demo
   .div{
        width: 100px;
        height: 100px;
        background:red;
        // Add transitions
        transiton: 1s;       //即transiton: all 1s; 
    }
    .div:hover{
        width: 200px;
        height: 200px;
        background: #000;    
    }
    // Transiton does not set parameter 1 which means that transitions are applied to all states that change by default
    // If only a specific attribute needs to be transitionally changed, just specify it
        .div{
            width:100px;
            height:100px;
            background:red;
            // Add multiple transitions // key code
            transition:background 1s,width 2s height 3s; 
        }
        .div:hover{
            width:2000px;
            height:10;
            background:pink;
        }  
Copy the code

Animation more powerful is also the above effect

.div{
        width:100px;
        height:100px;
        background:red;
    }
    .div:hover{
        animation:move 1s linear;
    }
    @keyframes move{
        100% {// We can use to{... }from{... 20%} {... {} 40%.. }
            width:100px; height:3000px; background:pink; }}// Syntax shorthand
    //animation:Duration Specifies the duration of the animation to be played. Timing -functionThe speed curve specifying the speed effectdelayIn the drawingdomThe whole tree comes out beforeanimationTime to wait before execution (How much delay)
        iteration-countDefine the specific number of times the animation is played or the infinite loop (infinite)
        directionSet the direction of animation playback [normal- In chronological order] [reverse- Running in the opposite direction of the timeline] [alterbate- back and forth] [alternate-reverse- Animation runs backwards then forwards and keeps alternating]play-stateControls the partial state of the element's animation. This controls the pause and continue values of the animationrunning(Continue to) paused(suspended)
        fill-mode; After the control animation is over4[none- Back to the state before animations start] [forwards- animations stay at the end after animations end] [backwords- animations back to frame 1] [both-]Copy the code

Animation and Transition?

Keyframes provide more control and in particular the timeline makes it more powerful some of the confusing concepts that are common in CSS animation implementations animation is used to set animation properties and there is a shorthand property that contains six properties and transtion is used to set elements which are also transitions Rotate () scale() rotate() skew()

For reference only, I recommend that you should have the location id above which is a good C3 animation for reference only, loding animation