Transition property in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the CSS transition property do?

It makes changes to CSS properties happen smoothly over time instead of instantly, creating an animation effect.

beginner

Name the four parts of the transition shorthand property.

The four parts are: property (which CSS property to animate), duration (how long it takes), timing-function (speed curve), and delay (wait time before starting).

intermediate

What is the default value of the transition-timing-function?

The default is ease, which starts slow, speeds up, then slows down at the end.

beginner

How do you make a background color change smoothly over 0.5 seconds using transition?

Use transition: background-color 0.5s; on the element. When the background color changes, it will animate over half a second.

intermediate

Can you transition multiple CSS properties at once? How?

Yes, by listing them separated by commas, like transition: width 1s, height 1s; to animate width and height together.

Which CSS property controls how long a transition animation lasts?

A transition-timing-function

B transition-delay

C transition-duration

D transition-property

transition-duration sets the length of time the transition takes to complete.

What is the default timing function for CSS transitions?

A ease

B ease-in

C linear

D ease-out

The default transition-timing-function is ease, which starts slow, speeds up, then slows down.

How do you delay a transition start by 2 seconds?

A transition-delay: 2s;

B transition-duration: 2s;

C transition-start: 2s;

D transition-wait: 2s;

transition-delay sets how long to wait before the transition begins.

Which value for transition-property makes all properties transition?

A every

B all

C auto

D none

Using all means every animatable property will transition.

What happens if you set transition: none; on an element?

A Transitions happen instantly.

B Transitions use default settings.

C Transitions last forever.

D No transitions will occur.

none disables all transitions on the element.

Explain how the CSS transition property works and why it is useful.

Think about how changes happen on a webpage and how transition makes them look nicer.

Describe how to create a smooth color change on a button when hovered using the transition property.

Consider what CSS properties you change on hover and how to animate that change.