Interactive online courses HTML Academy
2026-03-09 10:55 Diff
https://htmlacademy.org/courses/dynamic/animations/landing-3

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

Landing, step 3

Let’s get out onto the surface and raise the flag! Glory to the explorers of the Moon and CSS animations!

Comments

  • index.html
  • style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <title>Landing, step 3</title> <meta charset="utf-8"> <link rel="stylesheet" href="epoch5.css"> <link rel="stylesheet" href="style.css"> </head> <body class="cosmic"> <div class="moon"> <span class="flag"></span> </div> <div class="rocket arrival"> <span class="fuel"></span> </div> </body> </html>

CSS

.rocket { animation-name: fly; animation-duration: 1.5s; animation-timing-function: ease-out; animation-fill-mode: forwards; } .fuel { animation-name: fire; animation-duration: 1s; animation-delay: 1s; animation-fill-mode: forwards; } @keyframes fly { to { transform: translate(240px, 260px) rotate(-30deg); } } @keyframes fire { to { opacity: 0; } }

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 hoist, containing a frame to with a top: -25px property,
  2. then assign this animation to the flag .flag: duration 1s, animation delay 2s,ease-in type, keep the state after animation.