Join the AI Workshop and learn to build real-world apps with AI. A hands-on, practical program to level up your skills.
Animation is a fascinating topic. Whether you want to add interaction animations like transitions, or build 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 considered 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 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 you 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 as CSS or the Web Animations API.
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 to use JavaScript to create longer animations easily.
It currently only works in Chrome and Firefox. Safari, IE, and Edge do not yet support 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 animation experiences and VR, although it is more complex.
In addition to the native APIs, there are great libraries that abstract most of the details for you: