Choose what transitions — practice exercise

What you'll be asked to do

1. 1.Choose what transitionsexercise · easy · 10 min

   Transition only the opacity of #box.

   Passes when: Transition only the opacity of #box.

2. 2.Set a durationexercise · easy · 10 min · practice plan

   Give #box a half-second transition.

   Passes when: Give #box a half-second transition.

3. 3.Add a delayexercise · easy · 10 min · practice plan

   Delay the transition on #box by 1 second.

   Passes when: Delay the transition on #box by 1 second.

4. 4.Set the easingexercise · easy · 10 min · practice plan

   Use ease-in-out on #box.

   Passes when: Use ease-in-out on #box.

5. 5.Use the shorthandexercise · medium · 10 min · practice plan

   Transition opacity over 300ms, linear, after a 1s delay.

   Passes when: Transition opacity over 300ms, linear, after a 1s delay.

6. 6.Fix the duration with no unitbug fix · easy · 8 min

   A duration needs s or ms.

   Passes when: A duration needs s or ms.

7. 7.Fix the swapped timesbug fix · easy · 8 min · practice plan

   The duration comes first, the delay second.

   Passes when: The duration comes first, the delay second.

8. 8.Fix the invalid easingbug fix · easy · 8 min · practice plan

   That is not a built-in timing function.

   Passes when: That is not a built-in timing function.

9. 9.Fix the misspelled property namebug fix · easy · 8 min · practice plan

   The transitioned property is opacity.

   Passes when: The transitioned property is opacity.

10. 10.Fix the transition with no durationbug fix · easy · 8 min · practice plan

    A transition with no duration is instant.

    Passes when: A transition with no duration is instant.

Between them these tasks cover transition-property, Duration and delay and Timing functions.

Looking for a different chapter? See every practice set, or switch to the interview theory questions.