Interactive online courses HTML Academy
2026-03-09 14:13 Diff
https://htmlacademy.org/courses/dynamic/animations/water-adventure

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

Water adventure

As we progress in our study of CSS, we will watch a civilization evolve. And now we will travel to a new world of mechanisms and cogwheels.

Your task is to create the necessary animation frames and send a ship out to sea. The animation-name and animation-duration properties of the objects have already been defined.

Comments

  • index.html
  • style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <title>Water adventure</title> <meta charset="utf-8"> <link rel="stylesheet" href="epoch1.css"> <link rel="stylesheet" href="style.css"> </head> <body class="ancient-world"> <div> <div class="comet"></div> <div class="sun-small"></div> <div class="clouds"></div> <div class="water"></div> <div class="ship"></div> </div> </body> </html>

CSS

.ship { animation-name: move-ship; animation-duration: 40s; } .clouds { animation-name: move-clouds; animation-duration: 40s; } .sun-small { animation-name: move-sun; animation-duration: 10s; } @keyframes move-comet { 100% { transform: translate(500px, 400px); } }

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 move-clouds containing a frame to with a translateX(-1000px) transformation,
  2. a move-sun animation containing a to frame with a translate(350px, -400px) transformation,
  3. and a move-ship animation containing a to frame with a translateX(1000px) tranformation.
  1. Animate the comet