Transitions & Animations
A transition makes a property change happen smoothly over time instead of instantly. Written as transition: background-color 0.3s ease, it means: whenever background-color changes on this element (say, from a :hover rule), animate that change over 0.3 seconds, using an ease timing curve (starts slow, speeds up, ends slow) rather than jumping abruptly. You can transition almost any numeric property color, size, position, opacity. For more complex, multi-step motion that doesn't need a trigger like hover, @keyframes defines an animation sequence: @keyframes slideIn { from { opacity: 0; } to { opacity: 1; } } describes a start and end state (or several steps with percentages like 0%, 50%, 100%), and then animation: slideIn 0.5s ease-out applies that sequence to an element, playing it once the page loads or whenever you trigger it. The key difference: transitions need a state change (like :hover) to fire, while animations can run automatically and even repeat forever with animation-iteration-count: infinite.
Why this matters
- ·Transitions turn abrupt, jarring changes into smooth, polished-feeling interactions
- ·@keyframes animations can run automatically without needing a user interaction trigger
- ·animation-iteration-count: infinite creates continuous effects like spinning loaders
Common mistakes
- ·Transitioning too many properties on too many elements can make a page feel sluggish
- ·Forgetting a duration (like 0.3s) means the transition property does absolutely nothing
- ·Overusing flashy animations everywhere can distract from content and feel unprofessional
Frequently asked questions
A transition needs a trigger, like :hover, to fire between two states. An @keyframes animation can run automatically, with multiple steps, and even repeat forever.
Practice questions
Question 1
Add a transition to a box so its background-color changes smoothly on hover.
Question 2
Create a @keyframes animation that fades an element in from opacity 0 to 1.
Quick check
Just for this topic answer honestly, then check yourself.
1 / 10