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>Launching a factory, step 2</h2>
5
</ul><h2>Launching a factory, step 2</h2>
6
<p>Excellent! All we need to do now is to deliver the parts to the factory by car and start the production.</p>
6
<p>Excellent! All we need to do now is to deliver the parts to the factory by car and start the production.</p>
7
<h2>Comments</h2>
7
<h2>Comments</h2>
8
<ul><li>index.html</li>
8
<ul><li>index.html</li>
9
<li>style.css</li>
9
<li>style.css</li>
10
</ul><p>HTML</p>
10
</ul><p>HTML</p>
11
<p><!DOCTYPE html> <html lang="en"> <head> <title>Launching a factory, step 2</title> <meta charset="utf-8"> <link rel="stylesheet" href="epoch3.css"> <link rel="stylesheet" href="style.css"> </head> <body class="scientific-world"> <div> <div class="plane"></div> <div class="antenna"></div> <div class="car"></div> <div class="fog-1"></div> <div class="fog-2"></div> </div> </body> </html></p>
11
<p><!DOCTYPE html> <html lang="en"> <head> <title>Launching a factory, step 2</title> <meta charset="utf-8"> <link rel="stylesheet" href="epoch3.css"> <link rel="stylesheet" href="style.css"> </head> <body class="scientific-world"> <div> <div class="plane"></div> <div class="antenna"></div> <div class="car"></div> <div class="fog-1"></div> <div class="fog-2"></div> </div> </body> </html></p>
12
<p>CSS</p>
12
<p>CSS</p>
13
<p>@keyframes move-plane { to { transform: translateX(-1000px); } } @keyframes move-antenna { to { transform: rotate(-60deg); } } @keyframes move-car { to { transform: translateX(-350px); } } @keyframes show-fog { to { opacity: 1; } } .plane { animation-name: move-plane; animation-duration: 10s; } .antenna { animation-name: move-antenna; animation-duration: 2s; animation-delay: 2s; animation-fill-mode: forwards; }</p>
13
<p>@keyframes move-plane { to { transform: translateX(-1000px); } } @keyframes move-antenna { to { transform: rotate(-60deg); } } @keyframes move-car { to { transform: translateX(-350px); } } @keyframes show-fog { to { opacity: 1; } } .plane { animation-name: move-plane; animation-duration: 10s; } .antenna { animation-name: move-antenna; animation-duration: 2s; animation-delay: 2s; animation-fill-mode: forwards; }</p>
14
<p>Thanks! We’ll fix everything at once!</p>
14
<p>Thanks! We’ll fix everything at once!</p>
15
<p>The code has changed, click “Refresh” or turn autorun on.</p>
15
<p>The code has changed, click “Refresh” or turn autorun on.</p>
16
<p>You’ve gone to a different page</p>
16
<p>You’ve gone to a different page</p>
17
<p>Click inside the mini-browser to shift the focus onto this window.</p>
17
<p>Click inside the mini-browser to shift the focus onto this window.</p>
18
<p>100%</p>
18
<p>100%</p>
19
<ol><li>Assign a the move-car animation to the car .car: duration 4s, start delay 5s, keep the post-animation state.</li>
19
<ol><li>Assign a the move-car animation to the car .car: duration 4s, start delay 5s, keep the post-animation state.</li>
20
<li>Assign the show-fog animation to the smoke clouds .fog-1 and .fog-2 with the following parameters: duration 1s,2 cycles, alternating direction.</li>
20
<li>Assign the show-fog animation to the smoke clouds .fog-1 and .fog-2 with the following parameters: duration 1s,2 cycles, alternating direction.</li>
21
<li>.fog-1 should have a playback delay of 9s,.fog-2 - 10s.</li>
21
<li>.fog-1 should have a playback delay of 9s,.fog-2 - 10s.</li>
22
</ol>
22
</ol>