Transitions & Speed Profiles
What is a CSS Transition?
Imagine hovering your mouse over a button. In a basic layout, the button instantly snaps from green to red, which can feel sudden and abrupt. Now imagine a button that slowly and smoothly morphs/fades from green to red over half a second.In CSS, Transitions smooth out changes to CSS properties over a defined duration. They allow you to animate state changes (like hovering over links, clicking inputs, or activating menus) instead of switching instantly.
Why does it matter?
Transitions add polish and premium feeling to websites. They guide the user's eye and make user interfaces feel alive, fluid, and highly interactive.Syntax Breakdown
transition: [property] [duration] [timing-function];
E.g., transition: background 0.3s ease-in-out;
property (background): The CSS feature you want to animate. You can write all to animate everything that changes.duration (0.3s): How long the transition takes in seconds (s) or milliseconds (ms).timing-function (ease-in-out): The speed profile. E.g., linear (constant speed), ease-in (starts slow, speeds up), ease-out (starts fast, slows down).Common Mistakes
button:hover { transition: 0.3s; }). This causes the transition to animate when hovering *on*, but snap back instantly when moving the mouse *off*. Always write the transition rule on the base class (.btn):Quick Reference
transition — Shorthand to animate styling transitions.transition-delay — Sets a wait time before the animation starts.ease-in-out — Smooth acceleration and deceleration speed profile.Your Task
Add a transition to the `.btn` class for the `background` property over a duration of `0.5s`.
index.html
Type code above to start the lesson.
Live Preview