What is the difference between CSS transitions and CSS animations?

Explanation

CSS transitions animate between two states when a property changes, requiring a trigger (hover, class change). CSS animations use @keyframes to define multiple waypoints, can run automatically on load, loop infinitely, change direction, and have more precise control over timing. Use transitions for simple state changes (hover effects) and animations for complex, multi-step, or self-running sequences. Both are more performant than JavaScript-driven animations.