CSS Animation: animation:name: Defines the name of the animation, used with the following @keyframes (KeyFrames), and the keyframe can be set from,to, percentages and so on. and generally animate related properties in the outer layer, such as name,duration,iteration-count,timing-function,alternate-reverse. Set relative positioning in the outer layers, set absolute positioning inside the inner. In general, a three-layer div will be set to show the three-dimensional effect, the outermost plus-webkit-perspective:1000px; the second layer-webkit-transform-style:preserve-3d; the third layer places each sub-layer The difference between transition and animation transition is the transition, animation is animation. And the transition effect can only be limited, the animation can be infinite loop, animation can set the 3D effect, and animation is to set the keyframe.
Comprehensive application of animation and transition