Web animation expert Sarah Drasner lays out her recommendations in this video. TLDR: Use CSS animations for simple interactions and JavaScript (e.g. GSAP) for everything else.

I've seen some impressive animations with pure CSS, but there isn't much reason to bother doing that when libraries like GSAP are easier to use and just as performant.

It's really a hard decision. I guess, for the simple kind of animations, go CSS. In theory, it should have the best performance as it has (optimized) low-level algorithms directly interfacing the renderer and CSS is really easy to define and read (even for designers with no dev background).

But on the other hand, more complex things seem to be smoother in HTML5 Canvas.

As a result, I would say you should use the easiest solution to implement and maintain and only try others when you are not happy with the performance or UX.