For those wondering if CSS is the place for this sort of thing – my view on it is that it depends entirely on what you’re animating.
If the animation is purely about the presentation of an item, then I think CSS is the right place. The loading spinner is a good example of this – the fact that it spins is just a presentation thing. Being able to have semantic markup and content that indicates loading is occurring, and then change the presentation of that to look like a spinner is a purer implementation than the status quo.
There are times when the animation is actually behavioural, and in those cases JavaScript might be the better tool.
It’s a similar to images. They can be represented in HTMLorCSS. We make a call on a case-by-case basis whether the image is content or presentation and then use the appropriate technology. Same goes for animation.
Drew McLellan
For those wondering if CSS is the place for this sort of thing – my view on it is that it depends entirely on what you’re animating.
If the animation is purely about the presentation of an item, then I think CSS is the right place. The loading spinner is a good example of this – the fact that it spins is just a presentation thing. Being able to have semantic markup and content that indicates loading is occurring, and then change the presentation of that to look like a spinner is a purer implementation than the status quo.
There are times when the animation is actually behavioural, and in those cases JavaScript might be the better tool.
It’s a similar to images. They can be represented in HTML or CSS. We make a call on a case-by-case basis whether the image is content or presentation and then use the appropriate technology. Same goes for animation.
That’s my take on it.