Transition timing functions in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a transition-timing-function in CSS?

It controls the speed curve of a transition, deciding how the intermediate states of the transition are calculated over time.

beginner

Name four common predefined transition-timing-function values.

• ease
• linear
• ease-in
• ease-out

beginner

What does the linear timing function do in a CSS transition?

It makes the transition progress at a constant speed from start to end, like a steady walk without speeding up or slowing down.

intermediate

Explain the difference between ease-in and ease-out timing functions.

ease-in starts slow and speeds up towards the end.<br>ease-out starts fast and slows down towards the end.

intermediate

How can you create a custom transition speed curve in CSS?

By using the cubic-bezier(x1, y1, x2, y2) function with four numbers between 0 and 1 to define the curve shape.

Which transition-timing-function makes the transition move at a constant speed?

A ease

B linear

C ease-in

D ease-out

linear means the speed stays the same throughout the transition.

What does ease-in do to the speed of a transition?

A Starts slow and speeds up

B Starts fast and slows down

C Constant speed

D Jumps instantly

ease-in starts slow and then speeds up towards the end.

Which CSS function allows you to customize the transition speed curve?

A steps()

B linear()

C ease()

D cubic-bezier()

cubic-bezier() lets you define a custom curve with four control points.

If you want a transition to start fast and slow down at the end, which timing function do you use?

A ease-in

B linear

C ease-out

D ease

ease-out starts quickly and slows down at the end.

What is the default transition-timing-function value if none is specified?

A ease

B step-start

C ease-in-out

D linear

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

Describe what a transition timing function does and why it matters in web design.

Think about how a car accelerates or brakes smoothly.

List and explain at least three predefined CSS transition timing functions and when you might use each.

Consider how the speed changes during the transition.