Transition property in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a smooth color change effect on hover.

CSS

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

button:hover {
  background-color: red;
}

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

A2s

Bcolor

Cease-in

Dall

Attempts:

3 left

💡 Hint

Common Mistakes

Using a property name instead of a time duration.

Leaving out the duration causes no visible transition.

The transition property needs a duration like 2s to specify how long the effect takes.

2fill in blank

medium

Complete the code to make the transition use an ease-in timing function.

CSS

div {
  width: 100px;
  transition: width 1s [1];
}

div:hover {
  width: 200px;
}

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

Aease

Blinear

Cease-out

Dease-in

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'linear' which moves at a constant speed.

Using 'ease-out' which starts fast and slows down.

The timing function ease-in makes the transition start slowly and speed up.

3fill in blank

hard

Fix the error in the transition shorthand property to smoothly change opacity over 0.5 seconds.

CSS

.box {
  opacity: 0.5;
  transition: [1] 0.5s ease;
}

.box:hover {
  opacity: 1;
}

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

Aopacity 0.5s

Bopacity

Call

Dopacity ease

Attempts:

3 left

💡 Hint

Common Mistakes

Including duration or timing inside the property name.

Using 'all' when only opacity should transition.

The transition property expects the property name first, then duration and timing. Here, duration and timing are already given, so only the property name 'opacity' is needed.

4fill in blank

hard

Fill both blanks to create a transition that changes both background color and transform over 0.3 seconds.

CSS

.card {
  transition: [1] [2];
}

.card:hover {
  background-color: yellow;
  transform: scale(1.1);
}

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

Abackground-color, transform

B0.3s

Cbackground-color, transform 0.3s

Dease

Attempts:

3 left

💡 Hint

Common Mistakes

Putting duration inside the property list.

Forgetting to separate properties with commas.

The first blank lists the properties separated by commas. The second blank is the duration for the transition.

5fill in blank

hard

Fill all three blanks to create a transition that changes color over 1 second with an ease-out timing function.

CSS

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

p:hover {
  color: green;
}

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

Acolor

B1s

Cease-out

Dbackground-color

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'background-color' instead of 'color' when changing text color.

Mixing up duration and timing function values.

We specify the property to transition, the duration, and the timing function separately for clarity.