CSS Tutorial
CSS Transitions
transition interpolates a property when it changes — usually on hover or a class toggle.
A change that takes time
Without a transition, a hover color snaps. The browser paints the new value on the next frame and that is the whole story. transition tells the browser to walk from the old value to the new one over a duration. You still write two states — a default rule and a :hover (or a class). The transition only fills the gap between them.
Harbor studio uses this on cards and buttons: the sky background eases in, the card lifts a few pixels, the border color slides to teal. Nothing loops. A transition runs once per change, then stops.
The four parts
A full transition names the property, how long it lasts, how the speed curves, and an optional delay. The shorthand is the usual way to write it.
| Longhand | What it does | Typical value |
|---|---|---|
transition-property | Which CSS properties to animate | background-color, transform |
transition-duration | How long the interpolation lasts | 200ms or 0.2s |
transition-timing-function | The speed curve (easing) | ease, ease-out |
transition-delay | Wait before starting | 0s unless you have a reason |
Shorthand order is property, duration, easing, delay. Duration is required for anything to happen. If you omit the property, the browser uses all, which is convenient and a little wasteful.
Example
<style>
body {
font-family: system-ui, sans-serif;
color: #0c4a6e;
background: #f0f9ff;
margin: 1.25rem;
}
.book {
display: inline-block;
padding: 0.7rem 1.2rem;
border: 0;
border-radius: 0.5rem;
background: #0d9488;
color: #fff;
font: inherit;
cursor: pointer;
transition: background-color 200ms ease, transform 200ms ease;
}
.book:hover,
.book:focus-visible {
background: #0f766e;
transform: translateY(-2px);
}
</style>
<h1>Harbor studio</h1>
<p>Hover the button. The teal deepens and the control lifts.</p>
<button class="book" type="button">Book a desk</button>Put the transition on the default rule, not only on :hover. Then the property eases both on the way in and on the way out. Open this in /css/try and hover slowly.
Name the properties you mean
transition: all 300ms ease works. It also interpolates things you did not intend — layout widths, font-size, box-shadow — and can feel sluggish. Name the properties that actually change. Prefertransform and opacity when you can: the browser can animate those on the GPU without recalculating the whole page.
Example
<style>
body {
font-family: system-ui, sans-serif;
color: #0c4a6e;
background: #f0f9ff;
margin: 1.25rem;
}
.card {
max-width: 16rem;
padding: 1rem 1.15rem;
background: #fff;
border: 1px solid #bae6fd;
border-radius: 0.75rem;
box-shadow: 0 1px 0 #e0f2fe;
transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.card:hover {
transform: translateY(-4px);
border-color: #0d9488;
box-shadow: 0 10px 24px rgba(12, 74, 110, 0.12);
}
h2 { margin: 0 0 0.35rem; font-size: 1.1rem; color: #0f766e; }
p { margin: 0; color: #475569; }
</style>
<article class="card">
<h2>Tide desk</h2>
<p>Window seat. Open 8–16.</p>
</article>Width, height, top, and margin can transition, but they force layout on every frame. For a lift, usetranslateY. For a fade, use opacity. Leave all for a quick prototype, then tighten the list.
Easing is the personality
Linear motion looks mechanical. ease starts a little slow, speeds up, then eases out — the default most people want. ease-out arrives quickly then settles, which feels right for things that appear. ease-in starts slow, which is less common for hover.
| Timing function | Feel |
|---|---|
ease | Gentle both ends. Default shorthand if you omit easing |
ease-out | Fast start, soft landing. Good for hover lifts |
ease-in | Slow start. More useful when something leaves |
linear | Constant speed. Fine for a progress bar, odd for a button |
ease-in-out | Slow both ends. Longer motions, not tiny hovers |
Example
<style>
body {
font-family: system-ui, sans-serif;
color: #0c4a6e;
background: #f0f9ff;
margin: 1.25rem;
}
.swatch {
width: 8rem;
height: 3rem;
margin: 0.5rem 0;
border-radius: 0.4rem;
background: #38bdf8;
transition-property: transform;
transition-duration: 600ms;
}
.swatch.linear { transition-timing-function: linear; }
.swatch.out { transition-timing-function: ease-out; }
.row:hover .swatch { transform: translateX(4rem); }
p { margin: 0.2rem 0 0; font-size: 0.85rem; color: #475569; }
</style>
<h1>Harbor studio</h1>
<p>Hover the block. Both bars travel the same distance.</p>
<div class="row">
<div class="swatch linear"></div>
<p>linear</p>
<div class="swatch out"></div>
<p>ease-out</p>
</div>What will not transition
Only properties with interpolatable values animate. Color, length, opacity, transform, and shadow work.display does not. You cannot ease from none to block. Discrete switches — font-family, background-image URLs — also snap. If a hover “does nothing,” check that the property can actually blend and that duration is not 0s.
Respect prefers-reduced-motion when you add motion on a real site. A short media query can set transition: none for visitors who asked the operating system to cut animation. The next chapter covers looping motion with @keyframes.
Worked examples
The short listings above show one property. These sheets paint documents you would actually ship: a lab dashboard, a clinic form, a marks table, a nav bar.
CSS does not invent meaning. HTML already said what the pieces are. Cascade, specificity, and the box model decide how they look. The numbers are classroom values — current, pH, pulse, 3-4-5 — so the style has something real to sit on.
Preview them in the CSS editor at /css/try. Change one property and watch the page paint. The tags stay the same.
Biology
A link that eases colour
transition interpolates a property when it changes. duration 0.2–0.3s for colour. ease-out on hover-in often feels better than linear.
Do not transition every property. width and height trigger layout. colour and transform are the usual pair.
Example
<style>
a { color: #9f1239; transition: color 0.25s ease; }
a:hover { color: #0f766e; }
</style>
<p><a href="/css">Clinic home</a></p>Engineering
A chip that warms on hover
Same duration on background. If you forget transition on the outgoing state, the colour snaps back. Put the transition on the resting rule.
Example
<style>
.chip { background: #ccfbf1; padding: 0.4rem 0.7rem; transition: background 0.2s ease; }
.chip:hover { background: #99f6e4; }
</style>
<span class="chip">ok</span>