Image Animation Sequence

HTML _CSS

Image Animation Sequence

HiroDaegu 2022. 5. 13. 01:07

728x90

SMALL

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>IMAGE ANIMATION SEQUENCE</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="scene">
    <img src="./newyork.png" class="city">
    <img src="./plane.png" class="plane">
    <img src="./cloud.png" class="cloud cloud-1">
    <img src="./cloud.png" class="cloud cloud-2">
    <img src="./cloud.png" class="cloud cloud-3">
    <img src="./boat.png" class="boat">
  </div>
</body>
</html>

.scene {
  width: 230px;
  height: 200px;
  position: relative;
  overflow: hidden;
  background-color: #2598eb;
}

.scene img {
  position: absolute;
}

.city {
  width: 100%;
  height: 50%;
  bottom: -3px;
  object-fit: cover;
}

.plane {
  width: 45%;
  top: 50px;
  left: -50px;
  animation: plane-move 15s linear forwards;
}

.cloud {
  animation: clouds-move 22s linear forwards;
}

.cloud-1 {
  width: 70px;
  top: 0;
  left: 30px;
}

.cloud-2 {
  width: 35px;
  top: 20px;
  left: 125px;
}

.cloud-3 {
  width: 45px;
  top: 55px;
  left: 145px;
}

.boat {
  width: 30%;
  bottom: 0;
  right: -50px;
  animation: boat-move 20s linear forwards;
}

@keyframes plane-move {
  to {
    transform: translate(300px, 100px);
  }
}

@keyframes clouds-move {
  to {
    transform: translateX(-25px);
  }
}

@keyframes boat-move {
  to {
    transform: translateX(-300px);
  }
}

728x90

LIST