Animations and Transitions
CSS transitions are ideal for smooth changes between states, always requiring a trigger like hover, focus, or active. They work as simple transition effects - perfect for buttons that change color on hover, menus that slide smoothly, or elements that change opacity. The syntax is straightforward: you define the property to be animated, the duration, and the timing function.
On the other hand, CSS animations offer complete control over complex sequences through keyframes, and can run automatically without user interaction. They are perfect for loading spinners, continuously pulsing elements, automatically typing text, or elaborate entrance and exit sequences. With keyframes you define specific points of the animation behavior (0 - 100%).
For performance, it's preferable to use
transformandopacityinstead of properties likewidthormargin. It's also important to consider accessibility withprefers-reduced-motionfor users sensitive to motion.
Practical examples
Your system asks for reduced motion, so the movement in these examples is paused. Turn that setting off to see them animate.