Interactive online courses HTML Academy
2026-03-09 14:07 Diff
https://htmlacademy.org/courses/dynamic/animations/air-journey

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

Air journey

All right, now we know enough for a second journey: this time in the industrial era.

This time around, animation frames have been already created for objects, and your task is to set the necessary animation properties and send the balloon into the air.

Off we go!

Comments

  • index.html
  • style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <title>Air journey</title> <meta charset="utf-8"> <link rel="stylesheet" href="epoch2.css"> <link rel="stylesheet" href="style.css"> </head> <body class="mechanical-world"> <div> <div class="birds"></div> <div class="aerostat"></div> <div class="wind-mill"></div> <div class="ufo"></div> </div> </body> </html>

CSS

@keyframes move-wheel { to { transform: rotate(360deg); } } @keyframes move-aerostat { to { transform: translate(350px, -1000px); } } @keyframes move-birds { to { transform: translateX(1000px); } } @keyframes move-ufo { 50% { opacity: 1; } 100% { opacity: 0; transform: translate(200px, 375px); } }

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. Assign a move-birds animation with a duration of 30s to the birds .birds,
  2. then assign a move-wheel animation with a duration of 10s and an infinite number of replays to the mill .wind-mill,
  3. then assign a move-aerostat animation with a duration of 20s and a playback delay of 5s to the balloon .aerostat.
  1. Animate the UFO