Transitions: property duration timing
Add transition to smoothly animate CSS property changes, pick appropriate durations, and choose easing functions like ease-in-out.
Transitions: property duration timing is a free Frontend Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
What Is a CSS Transition?
A CSS transition animates a property from one value to another when it changes (on hover, focus, or a class toggle). It's declarative — you tell CSS which properties to transition and how; the browser does the rest.
Basic Syntax
transition: property duration timing-function delay. You can list multiple transitions separated by commas.
.btn {
background: #6366f1;
transition: background-color 0.2s ease;
}
.btn:hover {
background: #4f46e5;
}
// Browser smoothly animates the colour changeThe property Value
Specify which properties to transition. Use all to transition every animatable property — but this can trigger unwanted transitions on unrelated properties. Be explicit for performance and predictability.
.card {
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
opacity 0.15s linear;
}
/* Avoid 'all' in most cases */
.risky { transition: all 0.3s; }Duration — How Long
Transition duration in s (seconds) or ms (milliseconds). Short durations (100–200ms) for micro-interactions. Medium (200–400ms) for component state changes. Longer (400ms+) for page-level animations.
Timing Functions — The Feel
Timing functions control the acceleration curve. Common values: ease (default: slow start, fast middle, slow end), linear (constant speed), ease-in (starts slow), ease-out (ends slow), ease-in-out. Custom curves: cubic-bezier(x1, y1, x2, y2).
.btn { transition: transform 0.2s ease-out; }
.toast { transition: opacity 0.3s ease-in-out; }
/* Custom cubic-bezier from cubic-bezier.com: */
.spring { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }Delay — When to Start
A transition delay starts the animation after a specified time. Use it to stagger multiple elements or to prevent accidental hover triggers on fast mouse moves.
.dropdown-menu {
opacity: 0;
transition: opacity 0.2s ease 0.1s; /* 100ms delay */
}
.dropdown:hover .dropdown-menu {
opacity: 1;
}transitionend Event
JavaScript can listen for when a transition finishes with the transitionend event. Useful for removing elements after a fade-out or triggering the next step in a sequence.
element.addEventListener('transitionend', (e) => {
if (e.propertyName === 'opacity' && element.style.opacity === '0') {
element.remove();
}
});Transforming Elements
The transform property is GPU-accelerated and ideal for transitions. Common transforms: translate(), scale(), rotate(), skew(). Animating transform and opacity triggers compositing only — the fastest path.
.card {
transform: translateY(0) scale(1);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
transform: translateY(-4px) scale(1.02);
box-shadow: 0 12px 32px rgba(0,0,0,0.15);
}What Can Be Transitioned?
Any property with a numeric value can be transitioned: opacity, colour, transform, width, height, padding, border, font-size. Properties like display and visibility don't transition smoothly — use opacity for fade-in/out instead.
Practical: Modal Fade In
A modal that fades in and scales up from slightly smaller. Apply .open class with JavaScript; CSS handles the animation.
.modal {
opacity: 0;
transform: scale(0.95);
transition: opacity 0.2s ease, transform 0.2s ease;
pointer-events: none;
}
.modal.open {
opacity: 1;
transform: scale(1);
pointer-events: auto;
}Performance: Stick to Transform and Opacity
Animating properties that trigger layout (width, height, margin, top, left) is expensive — the browser recalculates layout on every frame. Stick to transform and opacity for smooth 60fps animations.
Quick Check
Which CSS property should you prefer animating for best performance?
Recap: CSS Transitions
transition: property duration timing delay. Animate specific properties, not 'all'. ease, ease-out, ease-in-out for natural motion. Listen for transitionend to chain actions. Stick to transform and opacity for performance. Use class toggles in JS to trigger transitions.
Frequently asked questions
Is the “Transitions: property duration timing” lesson free?
Yes — the full text of “Transitions: property duration timing” is free to read here on the web, and the Frontend Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO.
What will I learn in “Transitions: property duration timing”?
Add transition to smoothly animate CSS property changes, pick appropriate durations, and choose easing functions like ease-in-out. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Frontend Academy?
No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Transitions: property duration timing” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Frontend Academy lesson?
Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- CSS Custom Properties: declaring and updating
- Transitions: property duration timing
- @keyframes Animations
- Respecting prefers-reduced-motion