HTML Academy
Animation delay: animation-delay, step 2
Animations13/31
Back to the list of tasks
  • 1. Hello, animation!
  • 2. @keyframes: storyboard
  • 3. @keyframes: from and to
  • 4. @keyframes: frame grouping
  • 5. Complex animation, step 1
  • 6. Complex animation, step 2
  • 7. Water adventure
  • 8. Animation play count: animation-iteration-count
  • 9. Animation direction: animation-direction, step 1
  • 10. Animation direction: animation-direction, step 2
  • 11. Animation delay: animation-delay, step 1
  • 12. Animation delay: animation-delay, step 2
  • 13. Animation delay: animation-delay, step 3
  • 14. Air journey
  • 15. Pre- and post-animation state: animation-fill-mode, step 1
  • 16. Pre- and post-animation state: animation-fill-mode, step 2
  • 17. Pre- and post-animation state: animation-fill-mode, step 3
  • 18. Pre- and post-animation state: animation-fill-mode, step 4
  • 19. Pre- and post-animation state: animation-fill-mode, step 5
  • 20. Launching a factory, step 1
  • 21. Launching a factory, step 2
  • 22. Stopping and starting an animation: animation-play-state
  • 23. Animation form, animation-timing-function
  • 24. Animation-timing-function, step 2
  • 25. Animation-timing-function, step 3
  • 26. Animation-timing-function, step 4
  • 27. Rocket to the launch pad, step 1
  • 28. Rocket to the launch pad, step 2
  • 29. Landing, step 1
  • 30. Landing, step 2
  • 31. Landing, step 3
Air journey
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

Animation delay: animation-delay, step 3

The syntax of the animation-delay property that is used for setting the delay for the start of playback is identical to that of the animation-duration property.

For example, if we set the value to animation-delay: 10s, the animation will not start right away, but only ten seconds later.

Let’s finish our scene with a clock so that the bell only rings after the hand completes a circuit.

Comments

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Animation delay: animation-delay, step 3</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
.bell { animation-name: ding; animation-duration: 1s; } .arrow-small { animation-name: rotate; animation-duration: 1s; } @keyframes rotate { to { transform: rotate(360deg); } } @keyframes ding { 33% { transform: translateX(-15px); } 66% { transform: translateX(15px); } }

What didn’t you like in this task?

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%
Goalscompleted
0

    Set the following animation parameters to the bell .bell:

    1. start delay of 1s,
    2. duration of 100ms,
    3. animation cycles: 10.

    Cookies ∙ Privacy ∙ License Agreement ∙ About ∙ Contacts ∙ © HTML Academy OÜ, 2019−2024

    VISAMastercard

    Log in

    or

    Forgot your password?

    Sign up

    Sign up

    or
    Log in

    Restore access

    Have you forgotten your password or lost access to your profile? Enter your email connected to your profile and we will send you a link to restore access.

    Forgot to connect your email to the profile? Email us and we’ll help.