Animation delay: animation-delay, step 2 — Animations

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; }

Goalscompleted

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