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.
Let’s see an overview of these options, to find out which one is the right choice.
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 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 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
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 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:
Here's my latest YouTube video. I talk about work/life balance as a developer: