Skip to main content

CSS Transitions — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the CSS Transitions lesson. Every one is checked automatically in the browser — write the code, run it, and the tests tell you what still fails.

Sign in to start solvingCreate a free account

Exercises(5)

  1. 1

    Choose what transitions

    easy10 min

    Transition only the opacity of #box.

  2. 2

    Set a duration

    easy10 min

    Give #box a half-second transition.

  3. 3

    Add a delay

    easy10 min

    Delay the transition on #box by 1 second.

  4. 4

    Set the easing

    easy10 min

    Use ease-in-out on #box.

  5. 5

    Use the shorthand

    medium10 min

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

Find the bug(5)

  1. 1

    Fix the duration with no unit

    easy8 min

    A duration needs s or ms.

  2. 2

    Fix the swapped times

    easy8 min

    The duration comes first, the delay second.

  3. 3

    Fix the invalid easing

    easy8 min

    That is not a built-in timing function.

  4. 4

    Fix the misspelled property name

    easy8 min

    The transitioned property is opacity.

  5. 5

    Fix the transition with no duration

    easy8 min

    A transition with no duration is instant.

Ready to write the code?

The editor, the automatic checks and the worked solutions open up with an account.

Open the workspace