Summary of 9 common webpage animation implementation methods

With the gradual popularization of HTML5, the way to implement animations on Web pages has also increased, but it has also brought some compatibility issues. This article makes a summary.

Currently, there is no perfect method.

GIF has the best compatibility, but has poor image quality and no interaction.

Canvas is very hot, powerful, and difficult to program. It is not supported by the old IE.

SVG is good at processing vector graphics, which is easy to interact with. It is not supported by the old IE.

Css3 is very shiny, but has limited functions, which are not supported by old IE.

Apng and SMIL also need to check the support progress of various browsers in the future.

Video is also gorgeous, but it is unpleasant to prepare multiple file formats for a video.

Javascript is a golden oil. As long as it interacts with each other, it is still a general engineer.

Flash is very powerful, but the future is gloomy, and mobile terminals do not give strength.

Serial number	Name	Brief Introduction	Advantages	Disadvantages	Applicable scenarios
1	GIF Animation	This is the most historical method, and gif89a has reached the patent term, so there is no legal problem with its use.	Small files, many tools, good browser compatibility, and low resource usage.	Supports less colors (up to 256 colors) and less Alpha transparency, resulting in serious image sawtooth edges.	Suitable for occasions with few colors and simple pictures
2	Flash/Silverlight	You can use the browser plugin to Support Animation in a specific file format.	No pressure on cross-browser and complex animation Processing	Plug-ins need to be installed, mobile devices are not supported, and many resources are occupied, which may easily cause browser crashes.	Desktop systems, complex animations
3	Javascript + html	You can use JavaScript to dynamically modify DOM nodes and attributes for animation.	Good compatibility (desktop and mobile)	CSS, JS, images, and other files are required, which is inefficient at running.	Animations with significant compatibility and low computing workload
4	Javascript + canvas/webgl	Drawing through canvas 2D/3D Context	High operating efficiency, good tool support, powerful functions, and hardware acceleration	The old IE does not support it. The support of modern browsers varies with each other, causing inconvenience in interaction.	Ie678 can be ignored.
5	Javascript + SVG	Animation is implemented by dynamically modifying SVG nodes and attributes through Js.	Simple programming, Easy Drawing, powerful functions, and convenient Interaction	The old IE does not support modern browsers.	Where vector graphics are required, and ie678 can be ignored
6	SVG + smil	Compile an animation using a completely SVG tagged Language	Simple programming without JS	The old IE is not supported, and the support for modern browsers is also quite different. Only Firefox supports better	Firefox
7	Apng	More advanced animation image file formats than GIF animation, true color and Alpha transparency supported	High Image Quality, single file, and low resource usage.	Poor browser support, only supports frame-by-frame animation, not interactive	Firefox, opera
8	Css3	Directly implement the animation effect through CSS	Standardization and low resource usage.	The old IE is not supported. modern browsers have different support situations and weak interaction functions.	Modern Browser
9	Video	Use HTML5 videos for animation	Standardization and low resource usage.	The old IE does not support it. The support of modern browsers varies with each other, causing inconvenience in interaction.	Modern Browser

How to use video for animation? No error. It does! This morning, we opened bing.com and thought it was css3. We found it was a video.

The table above looks a little uncomfortable. Let's make a simple score table, as shown below:

Serial number	Name	Format	Desktop Compatibility	Mobile Terminal Compatibility	Internet Explorer 6/7/8	Interaction	Efficiency	Resource usage
1	GIF Animation	Binary	Very good	Very good	Supported	None	High	Low
2	Flash/Silverlight	Binary	Very good	Very poor	Supported	Easy	High	High
3	Javascript + html	Plain text	Very good	Very good	Supported	Easy	Low	Medium
4	Javascript + canvas	Plain text	Average	Good	Not Supported	Hard	High	Medium
5	Javascript + SVG	Plain text	Average	Good	Not Supported	Easy	Low	Medium
6	SVG + smil	Plain text	Difference	Very poor	Not Supported	Easy	High	Medium
7	Apng	Binary	Very poor	Very poor	Not Supported	None	High	Low
8	Css3	Plain text	Average	Good	Not Supported	None	High	Low
9	Video	Binary	Average	Average	Not Supported	Hard	High	Medium

The above is only an incomplete expression in my personal opinions. please correct me.

In addition, I strongly hope that the canvas and SVG experts will communicate with me.