- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Launching a factory, step 1</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>
</body>
</html>
CSS
@keyframes move-plane {
to {
transform: translateX(-1000px);
}
}
@keyframes move-antenna {
to {
transform: rotate(-60deg);
}
}
Goalscompleted
- Assign a
move-planeanimation to the plane.planewith a duration of10s, - then assign the
move-antennaanimation to the satellite dish.antennawith a duration of2s, a playback delay of2s, and keep the animation state after playback.