- index.html
- style.css
HTML
<!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>
CSS
@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;
}
Goalscompleted
- Assign a the
move-caranimation to the car.car: duration4s, start delay5s, keep the post-animation state. - Assign the
show-foganimation to the smoke clouds.fog-1and.fog-2with the following parameters: duration1s,2cycles, alternating direction. .fog-1should have a playback delay of9s,.fog-2—10s.