CSS transitions

A CSS shorthand property used to control the animation speed when changing CSS properties.

Part of: HTML and CSS Journey — Module 59

What it does: The keyword 'all' tells the browser to trigger a transition layout for any updated property. The 'linear' option creates an animation curve with uniform progression velocity. The transition property configures animations for property changes, while transform modifies coordinates. CSS time values require an explicit unit descriptor like 's' for seconds. transition-timing-function controls mathematical pace profiles like linear or ease-in. The initial value for duration is 0s, meaning no visible animation occurs unless specified. transition-delay specifies exactly how long the browser waits before beginning the animation. Using 'all' instructs the transition property to watch every single changeable attribute.

Common mistakes: Line 1 is incorrect because CSS declarations must separate properties from values using a colon (:), not an equals sign (=). Line 2 is incorrect because transition-duration requires a time unit such as 's' (seconds) or 'ms' (milliseconds). A unitless number is invalid.

Class: _____________________ · Name: _____________________ · Date: _________

Free printable worksheet with full answer key — or add this module to a journey and assign it to your class.

🖨 Print Worksheet and Answer key of CSS transitions (PDF)

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning

Duo

Which shorthand property creates smooth property changes over a specified duration?

transitiontransform

Matches

transition: width 2;

↓

Invalid because transition durations require a time unit like 's' or 'ms'.

Applying

Meanings

Term

transition

Meaning

A CSS shorthand property used to control the animation speed when changing CSS properties.

Practice

.btn {

Testing

Gaps

: opacity 2s;

Check Answer

Spots

1.item {

2 transition = width 1s;

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy

Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games

Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print

Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Teach this with your class →

Quick Questions

1. Which shorthand property creates smooth property changes over a specified duration?

A. transition ✓

B. transform

The transition property configures animations for property changes, while transform modifies coordinates.

2. Is transition-duration: 3; a valid declaration for a 3-second transition?

A. No, it must end with 's' or 'ms' ✓

B. Yes, unitless numbers default to seconds

CSS time values require an explicit unit descriptor like 's' for seconds.

3. Which property defines the pace or acceleration curve of a transition effect?

A. transition-timing-function ✓

B. transition-rate-modifier

transition-timing-function controls mathematical pace profiles like linear or ease-in.

4. What happens if transition-duration is completely omitted from a transition configuration?

A. It defaults to 0s and executes instantly ✓

B. It defaults to 1s and animates normally

The initial value for duration is 0s, meaning no visible animation occurs unless specified.

5. Can you configure a delay before a transition animation starts using transition-delay?

A. Yes ✓

B. No

transition-delay specifies exactly how long the browser waits before beginning the animation.

Match the Pairs

transition: opacity 0.5s; → Applies a transition effect to the opacity property lasting half a second.

transition-delay: 2s; → Waits 2 seconds before starting the transition effect animation.

Specifies that all animatable properties will transition smoothly. → transition-property: all;

Configures a transition to maintain a constant speed from start to end. → transition-timing-function: linear;

transition: width 2; → Invalid because transition durations require a time unit like 's' or 'ms'.

transition-duration: ease-in; → Invalid because ease-in is a timing function, not a time duration value.

Key Term

transition

A CSS shorthand property used to control the animation speed when changing CSS properties.

Fill in the Blanks

1. .box { transition: opacity 2s; }

Hint: Type the shorthand property name to create a transition

2. .card { transition-duration: 0.5s; }

Hint: Type the property that specifies how many seconds a transition takes

3. .btn { transition-property: transform; }

Hint: Type the property used to explicitly name the CSS feature to transition

4. .link { transition-delay: 1s; }

Hint: Type the property used to define a pause before the transition begins

5. .panel { transition-timing-function: ease; }

Hint: Type the keyword for a slow start and end acceleration curve

Spot the Error

Question 1

A .item {

B transition = width 1s;

C background: red;

D }

Line B — Line 1 is incorrect because CSS declarations must separate properties from values using a colon (:), not an equals sign (=).

Question 2

A .img {

B width: 200px;

C transition-duration: 0.5;

D opacity: 1;

E }

Line C — Line 2 is incorrect because transition-duration requires a time unit such as 's' (seconds) or 'ms' (milliseconds). A unitless number is invalid.

Question 3

A .nav transition: color 0.2s; {

B background: black;

C }

Line A — Line 0 is incorrect because style rules like transition must be declared inside the selector's opening curly brace.

Question 4

A .alert {

B opacity: 0;

C transition: opacity 1s;

D transition-delays: 0.5s;

E }

Line D — Line 3 is incorrect because the property name is singular: transition-delay, not transition-delays.

Question 5

A .badge {

B transitioning: transform 2s;

C transform: scale(1.1);

D }

Line B — Line 1 is incorrect because transitioning is not a valid CSS property name. Use transition instead.

For Teachers

Create a free class, add this module to a journey, and track who's stuck.

Create a free teacher account →

No credit card. No setup fee. Make a class and invite students in under three minutes.

For Students

Practice this topic interactively, track progress, and unlock badges.

Start Learning Free →

Have a class code?