- index.html
- style.css
HTML
<!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>
CSS
@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);
}
}
Goalscompleted
- Assign a
move-birdsanimation with a duration of30sto the birds.birds, - then assign a
move-wheelanimation with a duration of10sand an infinite number of replays to the mill.wind-mill, - then assign a
move-aerostatanimation with a duration of20sand a playback delay of5sto the balloon.aerostat.
- Animate the UFO