When should I use CSS animation instead of JavaScript?

Use CSS when the animation is decorative, simple, and stateless — a start state, an end state, and the browser interpolating between them. Hover and focus effects, loading spinners, page-load fade-ins, and class-toggle open/close animations are all ideal. A good rule of thumb: if it has two states (A → B) triggered by a pseudo-class or class toggle, CSS is almost always the right choice — and it keeps working even without JavaScript enabled.