Definition of animation

Animation == can be defined using == @keyframes, which means “Keyframes”, or a private prefix such as @-webkit- before the project goes live

Initial statefrom {

transform:rotate(0); } End state to {transform:rotate(360deg);

}
Copy the code

Invocation of animation

Once the animation is defined, you can invoke the animation using the animation property

  • Animation: r (animation name) 1s (total duration) linear (slow effect) 0s (delay) 3

    • Permanently executed when the fifth parameter is infinite

  • If you want to animate the 2nd, 4th, 6th… (an even number of times) automatic reverse execution, then add alternate parameter can be

    • Animation: Movelr 2s linear 0s infinite alternate;

  • If you want to stop the animation at the final end, add forward.

    • animation: changeToCircle 1s linear 0s forwards;

Multi-keyframe animation

This is equivalent to setting multiple breakpoints

` @keyframes changeColor { 0% { background-color:red; } 20% { background-color:yellow; } 40% { background-color:blue; } 60% { background-color:green; } 80% { background-color:purple; } 100% { background-color:orange; }} `
Copy the code