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>Air journey</h2>
5
</ul><h2>Air journey</h2>
6
<p>All right, now we know enough for a second journey: this time in the industrial era.</p>
6
<p>All right, now we know enough for a second journey: this time in the industrial era.</p>
7
<p>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.</p>
7
<p>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.</p>
8
<p>Off we go!</p>
8
<p>Off we go!</p>
9
<h2>Comments</h2>
9
<h2>Comments</h2>
10
<ul><li>index.html</li>
10
<ul><li>index.html</li>
11
<li>style.css</li>
11
<li>style.css</li>
12
</ul><p>HTML</p>
12
</ul><p>HTML</p>
13
<p><!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></p>
13
<p><!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></p>
14
<p>CSS</p>
14
<p>CSS</p>
15
<p>@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); } }</p>
15
<p>@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); } }</p>
16
<p>Thanks! We’ll fix everything at once!</p>
16
<p>Thanks! We’ll fix everything at once!</p>
17
<p>The code has changed, click “Refresh” or turn autorun on.</p>
17
<p>The code has changed, click “Refresh” or turn autorun on.</p>
18
<p>You’ve gone to a different page</p>
18
<p>You’ve gone to a different page</p>
19
<p>Click inside the mini-browser to shift the focus onto this window.</p>
19
<p>Click inside the mini-browser to shift the focus onto this window.</p>
20
<p>100%</p>
20
<p>100%</p>
21
<ol><li>Assign a move-birds animation with a duration of 30s to the birds .birds,</li>
21
<ol><li>Assign a move-birds animation with a duration of 30s to the birds .birds,</li>
22
<li>then assign a move-wheel animation with a duration of 10s and an infinite number of replays to the mill .wind-mill,</li>
22
<li>then assign a move-wheel animation with a duration of 10s and an infinite number of replays to the mill .wind-mill,</li>
23
<li>then assign a move-aerostat animation with a duration of 20s and a playback delay of 5s to the balloon .aerostat.</li>
23
<li>then assign a move-aerostat animation with a duration of 20s and a playback delay of 5s to the balloon .aerostat.</li>
24
</ol><ol><li>Animate the UFO</li>
24
</ol><ol><li>Animate the UFO</li>
25
</ol>
25
</ol>