transition — smooth animations
transition: <property> <duration> <easing>. Makes changes animate instead of snapping.
style.css
v3.1
style.css — the CSS rules
index.html — the HTML structure (what the CSS targets)
Live preview
updates as you type
🧠 How it works
transition tells the browser WHICH properties to animate and HOW LONG. transition: <property> <duration> <easing> <delay>. property: which CSS prop to animate (background, transform, opacity, ...). duration: how long (0.3s = 300ms). easing: ease (default), linear, ease-in, ease-out, ease-in-out. :hover is a pseudo-class — applies when the mouse is over the element. The transition GOES ON THE BASE STATE, not on :hover — common beginner mistake.
✏️ Try these changes
-
Change 0.3s to 1s→ animation becomes much slower -
Change ease to linear→ animation has constant speed (feels less natural) -
Change transform: translateY(-5px) to scale(1.1)→ card grows 10% on hover instead of moving up -
Change to translateY(5px)→ card moves DOWN on hover -
Remove the transition line entirely→ changes happen instantly (no animation)