What is the difference between CSS transitions and CSS animations?

CSS transitions animate a property change from one state to another when a trigger occurs (usually a class change or :hover). They are defined by specifying which property to transition, the duration, and the easing: transition: background-color 0.3s ease;. They only have a start and end state. CSS animations use @keyframes to define multiple intermediate states and run automatically without a trigger. They support looping (animation-iteration-count: infinite), direction (alternate), delay, and fill modes. Use transitions for simple hover effects and UI feedback. Use animations for complex, multi-step, or continuously looping effects like spinners, pulses, and entrance animations.