Compare the options for Animations on the Web
By Flavio Copes
Compare the main options for animations on the web, from CSS transitions and animations to SVG SMIL, the Canvas API, the Web Animations API, and WebGL.
Animation is a fascinating topic. Whether you want to add interaction animations like transitions, or building a whole full screen experience, you have all the tools you need.
And you have quite a few choices, which are all completely different and serve different purposes.
CSS is commonly known to be more performant, although JavaScript can also be very performant. It all depends on what you need to do, and how much time it takes for each frame to render.
Let’s see an overview of these options, to find out which one is the right choice.
CSS Transitions
CSS Transitions have a start and and end. They move one point from X to Y, or from visible to invisible.
It’s the simplest of the animations, and mostly used for subtle animations that integrate well with the rest of the page.
With transitions you go from one state to another, but you can’t have much more.
CSS Animations
CSS Animations compared to CSS transitions allow you to have more than just 2 states, in fact you can have lots of them, and they can be used to create more complex animations.
CSS Animations are recommended when you need relatively simple animations which are not possible to do with transitions.
SVG Animations
SVG is a great vector-based format which allows to create animations using SMIL, the SVG animations “native” format.
Chrome once announced it would deprecate SMIL, then reversed the decision. SMIL still works in every modern browser today. Legacy Edge and Internet Explorer never supported it. For new work, CSS Animations and the Web Animations API are the usual choice.
Canvas API Animations
The Canvas API offers a way to paint on the screen, using rasters rather than vectors.
Animations are possible although not as performant
The Web Animations API
The Web Animations API is the future of animations on the Web. It aims to bring the performance of CSS animations with the ability of using JavaScript to create longer animations easily.
Every modern browser has supported it in full since 2020 (Chrome 84, Firefox 75, Safari 13.1). You no longer need a polyfill.
WebGL
WebGL allows you to create 3D animations, and it’s more suited for immersive, full-screen animations experiences and VR, although more complex.
In addition to the native APIs, there are great libraries that abstract most of the details for you:
Want me to talk about your product? You can sponsor this site.