0Pricing
CSS Academy · Lesson

Transition Property Duration and Timing

Define which properties transition, how long they take, and when they start with delay.

Transition Property Duration and Timing is a free CSS Academy lesson on CoddyKit — lesson 1 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 CSS 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 interpolates between two property values over a specified duration when the value changes (e.g., on hover). No JavaScript is needed.

transition-property

Specifies which CSS properties to animate. Use all to transition every animatable property, or list specific properties.

button {
  transition-property: background-color, box-shadow;
}

transition-duration

Sets how long the transition takes. Accepts time values in seconds (s) or milliseconds (ms).

.card {
  transition-duration: 300ms;
}

The transition Shorthand

Combines all four transition sub-properties: property | duration | timing-function | delay.

.btn {
  transition: background-color 200ms ease, transform 150ms ease;
}

Multiple Transitions

List multiple transitions separated by commas to independently animate different properties:

.card {
  transition:
    background 300ms ease,
    box-shadow 200ms ease,
    transform 200ms ease;
}

transition-delay

Delays the start of the transition. Useful for sequencing animations or letting one transition finish before another starts.

.nav-item {
  transition: opacity 200ms ease;
}
.nav-item:nth-child(1) { transition-delay: 0ms; }
.nav-item:nth-child(2) { transition-delay: 50ms; }
.nav-item:nth-child(3) { transition-delay: 100ms; }

Transition on the Base State

Always place the transition property on the base state, not the :hover state. This ensures the transition plays on both hover-enter and hover-exit.

/* CORRECT: transition on base state */
.btn { transition: background 200ms; }
.btn:hover { background: royalblue; }

/* WRONG: only transitions on hover-enter, not exit */
.btn:hover { background: royalblue; transition: background 200ms; }

What Can Be Transitioned?

Most numerical CSS properties can be transitioned: colors, dimensions, opacity, transforms, etc. Discrete properties (like display) cannot be smoothly interpolated — they snap.

transition: all Warning

Using transition: all can cause unexpected animations on properties you do not intend to animate. Always specify explicit properties in production code.

Transitioning Colors

Color transitions interpolate between values. Use the same color format for best results:

.btn {
  background: hsl(210, 70%, 50%);
  transition: background 250ms ease;
}

.btn:hover {
  background: hsl(210, 70%, 40%);
}

Transition and Layout Thrash

Avoid transitioning layout-triggering properties like width, height, margin, and padding for performance. They cause layout recalculation on every animation frame. Use transform and opacity instead.

Quick Check

Where should the transition property be placed to ensure it plays on both hover-enter and hover-exit?

Recap

CSS transitions smooth property changes over time using transition-property, duration, timing-function, and delay. Place transitions on the base state for bidirectional animation. Prefer specific property lists over all for performance and predictability.

Frequently asked questions

Is the “Transition Property Duration and Timing” lesson free?

Yes — the full text of “Transition Property Duration and Timing” is free to read here on the web, and the CSS 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 CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “Transition Property Duration and Timing”?

Define which properties transition, how long they take, and when they start with delay. You practise CSS 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 CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Transition Property Duration and 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 CSS Academy lesson?

Yes. Every CSS 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

  1. Transition Property Duration and Timing
  2. Easing Functions: ease linear cubic-bezier
  3. Transitioning Multiple Properties
  4. Performance: Transformable vs Repainting Props
← Back to CSS Academy