Skip to main content

CSS Animations — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the CSS Animations 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

    Name the animation

    easy10 min

    Attach the spin keyframes to #box.

  2. 2

    Set the duration

    easy10 min

    Run the animation on #box over 2 seconds.

  3. 3

    Loop forever

    easy10 min

    Repeat the animation on #box indefinitely.

  4. 4

    Alternate direction

    easy10 min

    Make each repetition run in the opposite direction.

  5. 5

    Hold the final frame

    medium10 min

    Keep the end state after the animation finishes.

Find the bug(5)

  1. 1

    Fix the duration with no unit

    easy8 min

    A duration needs s or ms.

  2. 2

    Fix the invalid iteration count

    easy8 min

    Endless repetition uses the keyword infinite.

  3. 3

    Fix the fill mode

    easy8 min

    The value is forwards, with an s.

  4. 4

    Fix the direction value

    easy8 min

    The value is alternate.

  5. 5

    Fix the name that does not match

    easy8 min

    The animation name must match the @keyframes name.

Ready to write the code?

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

Open the workspace