This is a great question I also asked myself several years ago. After a serious research and a couple of hours lost reading never-ending, 4-5 years old posts I found Web Fundamentals , a newly created(then) website by Google for web development best practices, design and overall web projects guidance.
Web Fundamentals has a great section on Animations, where they suggest the following:
Use CSS animations for simpler “one-shot” transitions, like toggling UI element states and JavaScript animations when you want to have advanced effects like bouncing, stop, pause, rewind or slow-down.
When JavaScript is required for animation, use GSAP, as it's 20x faster than jQuery. Here is one comparison test you can check - Speed Test: GSAP vs CSS Transitions (Zepto) vs jQuery
CSS animations are preferred by most, because of their's hardware acceleration. Declaring your animations in CSS allows the browser to determine which elements should get GPU layers, and separate them up accordingly. Most don't know that JavaScript can do that too. The browser create a GPU layer for every 3D transform (translate3D() or matrix3d()). The GPU speed boost is not just for the CSS animations, it's for JavaScript animations too! Also, not every css animation get a GPU boost.
So, there is surely a place for JavaScript in the web animation world.
P.S I still voted for CSS animations ;)