0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p><b>Loading…</b>Everything will be ready in few seconds</p>
1
<p><b>Loading…</b>Everything will be ready in few seconds</p>
2
<ul><li>Theory</li>
2
<ul><li>Theory</li>
3
<li>Theory</li>
3
<li>Theory</li>
4
<li>Comments</li>
4
<li>Comments</li>
5
</ul><h2>Water adventure</h2>
5
</ul><h2>Water adventure</h2>
6
<p>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.</p>
6
<p>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.</p>
7
<p>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.</p>
7
<p>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.</p>
8
<h2>Comments</h2>
8
<h2>Comments</h2>
9
<ul><li>index.html</li>
9
<ul><li>index.html</li>
10
<li>style.css</li>
10
<li>style.css</li>
11
</ul><p>HTML</p>
11
</ul><p>HTML</p>
12
<p><!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></p>
12
<p><!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></p>
13
<p>CSS</p>
13
<p>CSS</p>
14
<p>.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); } }</p>
14
<p>.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); } }</p>
15
<p>Thanks! We’ll fix everything at once!</p>
15
<p>Thanks! We’ll fix everything at once!</p>
16
<p>The code has changed, click “Refresh” or turn autorun on.</p>
16
<p>The code has changed, click “Refresh” or turn autorun on.</p>
17
<p>You’ve gone to a different page</p>
17
<p>You’ve gone to a different page</p>
18
<p>Click inside the mini-browser to shift the focus onto this window.</p>
18
<p>Click inside the mini-browser to shift the focus onto this window.</p>
19
<p>100%</p>
19
<p>100%</p>
20
<ol><li>Create an animation move-clouds containing a frame to with a translateX(-1000px) transformation,</li>
20
<ol><li>Create an animation move-clouds containing a frame to with a translateX(-1000px) transformation,</li>
21
<li>a move-sun animation containing a to frame with a translate(350px, -400px) transformation,</li>
21
<li>a move-sun animation containing a to frame with a translate(350px, -400px) transformation,</li>
22
<li>and a move-ship animation containing a to frame with a translateX(1000px) tranformation.</li>
22
<li>and a move-ship animation containing a to frame with a translateX(1000px) tranformation.</li>
23
</ol><ol><li>Animate the comet</li>
23
</ol><ol><li>Animate the comet</li>
24
</ol>
24
</ol>