1. Animation is actually called a key frame, which can be combined with a keyframe to set a state of an intermediate frame; transition is a transition, a process of changing style values, with only the beginning and end;
2. Animation and @keyframe can trigger this process without triggering events, while transition needs to be triggered through hover or js events;
3. Animation can set many attributes, such as the number of cycles, the state of the end of the animation, etc., and the transition can only be triggered once;
4. Animation can be combined with keyframe to set each frame, but transition only has two frames;
Most of the properties of animation and transition are the same. They both change the property value of the element over time. The main difference between them is that transition needs to trigger an event to change the property, while animation does not need to trigger any event to change over time. The attribute value, and the transition is 2 frames, from from.... to, and the animation can be frame by frame.
1. Transition is a transition, which is the process of changing the style value. It only has the beginning and the end; animation is actually called a key frame, and a state of the intermediate frame can be set by combining with keyframe; 2. Animation can be triggered without triggering the time when it cooperates with
@keyframe This process, and transition needs to be triggered through hover or js events;
3. Animation can set many attributes, such as the number of cycles, the state of the end of animation, etc., and transition can only be triggered once;
4. Animation can be combined with keyframe to set each frame, but the transition only has two frames;
5. In terms of performance: the browser has a main thread and a typesetting thread; the main thread generally runs js, page layout, generates bitmaps, etc., and then passes the generated bitmaps Give the typesetting thread, and the typesetting thread will draw the bitmap to the page through the GPU, and will also request the bitmap from the main thread, etc.; when we use aniamtion, we can change many attributes in this way, such as we changed the width and height , postion, etc., when the properties of the document flow are changed, the reflow and redrawing of the page will have a greater impact on performance, but when we use transition, we generally use tansfrom to rotate and zoom, etc., and will not generate new The bitmap, of course, will not cause page rearrangement;