Transitions require a trigger to run. The trigger may be one of the events listed in the last section or it might be JavaScript, but the transition needs something outside itself to start.
CSS animations don’t need a trigger. They can respond to a trigger, but one isn’t needed to start the animation. Animations can run automatically when the page first loads. If you need your elements to change or move automatically, you have only one choice: animations.
Transitions are limited to an initial and final state. Animations can include as many intermediate states (keyframes) as desired in between the initial and final state. This gives you more control over CSS animations and lets you create more complex animations. Transitions work better for simpler animations.
