This is such a great example of how CSS is often overlooked. Very impressive. I learned a lot from reading it.
I bet if you had asked how to do this on StackOverflow without any prompting about language, you would have seen a LOT of javascript Me included.
EDIT: I literally just went to a project I'm working on and removed a piece of JS code that animated a feature because of what I learned from this example.
It's incredible how much you can achieve with using web platform features directly and using the minimal amount of JS possible. Pseudo elements, draggable="true", CSS animations... the list goes on and on.
Of course, the real trouble starts when you need to support older browsers and you realize you need to polyfill or change your strategy.
All of the peer answers are excellent, here are my $0.02:
As a design principle, it makes sense to use/re-use the capabilities of a component, rather than an agent acting on that primitive. For example, HTML already has a built-in CSS engine that can animate. Re-writing the animation in JavaScript is redundant and adds more code, which means more bugs, more size, more maintenance, etc.
Consider this example in C: using printf("%f", val) versus writing your own convert_float_to_characters_to_stdout(val) function.
There are cases where you may want to do the latter because printf is a very large function for embedded controllers and sometimes excludes format specifiers to save space, especially %f. But normally you just use what you are given rather than re-inventing the wheel.
I bet if you had asked how to do this on StackOverflow without any prompting about language, you would have seen a LOT of javascript Me included.
EDIT: I literally just went to a project I'm working on and removed a piece of JS code that animated a feature because of what I learned from this example.