Interactive online courses HTML Academy
2026-03-09 14:09 Diff
https://htmlacademy.org/courses/dynamic/animations/animation-delay-2

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

Animation delay: animation-delay, step 2

Let’s prepare a second animation, for which we will set a delay value in the next step.

Comments

  • index.html
  • style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <title>Animation delay: animation-delay, step 2</title> <meta charset="utf-8"> <link rel="stylesheet" href="epoch2.css"> <link rel="stylesheet" href="style.css"> </head> <body class="mechanical"> <div class="alarm-clock"> <span class="bell"></span> <span class="arrow-small"></span> </div> </body> </html>

CSS

@keyframes rotate { to { transform: rotate(360deg); } } .arrow-small { animation-name: rotate; animation-duration: 1s; }

Thanks! We’ll fix everything at once!

The code has changed, click “Refresh” or turn autorun on.

You’ve gone to a different page

Click inside the mini-browser to shift the focus onto this window.

100%

  1. Create an animation ding containing the following keyframes:
    33% with a translateX(-15px) transformation;
    66% with a translateX(15px) transformation.
  2. Then assign this animation to the bell .bell with a duration of 1s.