Transition timing functions in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set a smooth transition timing function for the button.

CSS

button {
  transition: background-color 0.5s [1];
}

Drag options to blanks, or click blank then click option'

Alinear

Bease-in

Cfast

Dslow

Attempts:

3 left

💡 Hint

Common Mistakes

Using invalid timing functions like 'fast' or 'slow'.

Confusing 'ease-in' with 'linear'.

The linear timing function makes the transition progress at a constant speed.

2fill in blank

medium

Complete the code to make the transition start slowly and speed up.

CSS

div {
  transition-timing-function: [1];
}

Drag options to blanks, or click blank then click option'

Aease-in

Blinear

Cease-out

Dstep-start

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing ease-out instead of ease-in.

Using step-start which jumps abruptly.

ease-in makes the transition start slowly and then speed up.

3fill in blank

hard

Fix the error in the transition timing function to make it valid CSS.

CSS

p {
  transition-timing-function: [1];
}

Drag options to blanks, or click blank then click option'

Aeasein

Bease-in

Clinear-gradient

Dease_out

Attempts:

3 left

💡 Hint

Common Mistakes

Writing 'easein' without a hyphen.

Using underscores or invalid functions.

The correct syntax uses a hyphen: ease-in. Other options are invalid CSS values.

4fill in blank

hard

Fill both blanks to create a transition that starts fast and ends slowly with a duration of 1 second.

CSS

div {
  transition: opacity 1s [1];
  transition-timing-function: [2];
}

Drag options to blanks, or click blank then click option'

Aease-out

Bease-in

Cease

Dlinear

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing ease-in with ease-out.

Using linear which is constant speed.

ease-out makes the transition start fast and end slowly. It is used both in shorthand and timing function.

5fill in blank

hard

Fill all three blanks to create a transition on color that lasts 2 seconds, uses a custom cubic-bezier curve, and starts slowly then speeds up.

CSS

button {
  transition-property: [1];
  transition-duration: [2];
  transition-timing-function: [3];
}

Drag options to blanks, or click blank then click option'

Acolor

B2s

Ccubic-bezier(0.4, 0, 1, 1)

Dbackground-color

Attempts:

3 left

💡 Hint

Common Mistakes

Using background-color instead of color.

Forgetting the 's' in duration like '2' instead of '2s'.

Using an incorrect cubic-bezier syntax.

The property is color, duration is 2s, and the cubic-bezier curve cubic-bezier(0.4, 0, 1, 1) starts slow and speeds up.