Compare the options for Animations on the Web
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
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.
SMIL was about to be deprecated in Chrome, but the team reversed this decision for the time being due to resistance, although SMIL has cross-browser inconsistencies (and IE/Edge do not support it).
They want to push CSS Animations and the Web Animations API instead of SMIL.
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.
It’s currently only working in Chrome and Firefox. Safari, IE and Edge are still considering it, but a polyfill exists to make it work across all browsers.
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:
I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter
JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025