Gloster Skin animation

css/index.css

@@ -0,0 +1,210 @@
+.container {
+  position: relative;
+}
+.bg-image {
+  background-image: url('../assets/d-wallpaper-bg.jpg');
+  background-repeat: no-repeat;
+  position: absolute;
+  width: 100vw;
+  height: 100%;
+}
+body {
+  padding: 0px;
+  margin: 0px;
+}
+.fog-parent {
+  position: relative;
+  overflow: hidden;
+  margin: 0 auto;
+  max-width: 100vw;
+  height: 415px;
+}
+.fog {
+  position: absolute;
+  width: 4200px;
+  height: 415px;  
+  background-image: url('../assets/fog.png') ;
+}
+.fog-animation {
+  transform: translateX(970px);
+  animation: move-left-to-right 30s linear infinite;
+}
+@keyframes move-left-to-right {
+  0% {
+    transform: translateX(-2100px);
+  }
+  100% {
+    transform: translateX(0px);
+  }
+}
+.gloster-title {
+  position: absolute;
+  top: 70%;
+  left: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.gloster-front-view {
+  position: absolute;
+  scale: 0.5;
+  opacity: 0;
+  animation: visible-and-scale-animation 6s linear forwards;
+}
+@keyframes visible-and-scale-animation {
+  0% {
+    opacity: 0;
+    scale: 0.5;
+  }
+  10%{
+    opacity: 0;
+    scale: 0.5;
+  }
+  25% {
+    opacity: 1;
+  }
+  50%{
+    opacity: 1;
+    scale: 1;
+  }
+  100% {
+    opacity: 1;
+    scale: 1;
+  }
+}
+.gloster-introducing {
+  position: absolute;
+  opacity: 0;
+  scale: 0.7;
+  animation: visible-translate-top-animation 6s linear forwards;
+}
+@keyframes visible-translate-top-animation {
+  00% {
+    opacity: 0;
+    transform: translateY(0);
+  }
+  10% {
+    opacity: 0;
+    transform: translateY(0);
+  }
+  30% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 1;
+    transform: translateY(-220%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(-220%);
+  }
+}
+.hector-car-container {
+  width: 400px;
+  height: 100%;
+  background-image: url('../assets/mghector.png');
+  background-repeat: no-repeat;
+  background-size: contain;
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  top: 220px;
+  left: 50%;
+  translate: -70%;
+  animation: translate-left-to-right-animation 5s linear forwards;
+}
+@keyframes translate-left-to-right-animation {
+  0% {
+    transform: translate(0);
+  }
+
+  100% {
+    transform: translate(100vw);
+  }
+}
+.hector-car-container::before{
+  content: "";
+  display: block;
+  width: 49px;
+  height: 49px;
+  background-image: url('../assets/hector-wheel.png');
+  position: absolute;
+  top: 125px;
+  animation: wheel-rotation-clockwise 3s linear infinite;
+  left: 52px;
+}
+.hector-car-container::after{
+  content: "";
+  display: block;
+  width: 49px;
+  height: 49px;
+  background-image: url('../assets/hector-wheel.png');
+  position: absolute;
+  top: 125px;
+  animation: wheel-rotation-clockwise 3s linear infinite;
+  left: 302px;
+}
+@keyframes wheel-rotation-clockwise {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(720deg);
+  }
+}
+.mgzs-car-container {
+  width: 350px;
+  height: 100%;
+  background-image: url('../assets/mgzs.png');
+  background-repeat: no-repeat;
+  background-size: contain;
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  top: 200px;
+  left: 50%;
+  translate: -10%;
+  animation: translate-right-to-left-animation 5s linear forwards;
+}
+@keyframes translate-right-to-left-animation {
+  0% {
+    transform: translate(0);
+  }
+  100% {
+    transform: translate(-100vw);
+  }
+}
+
+.mgzs-car-container::before {
+  content: "";
+  display: block;
+  width: 49px;
+  height: 49px;
+  background-image: url('../assets/mgzswheel.png');
+  position: absolute;
+  top: 123px;
+  animation: wheel-rotation-anti-clockwise 3s linear infinite;
+  left: 47px;
+}
+.mgzs-car-container::after {
+  content: "";
+  display: block;
+  width: 49px;
+  height: 49px;
+  background-image: url('../assets/mgzswheel.png');
+  position: absolute;
+  top: 123px;
+  animation: wheel-rotation-anti-clockwise 3s linear infinite;
+  left: 261px;
+}
+@keyframes wheel-rotation-anti-clockwise {
+  0% {
+    transform: rotate(720deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+}

index.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <link rel="stylesheet" href="./css/index.css" />
+  </head>
+
+  <body>
+    <div class="container">
+      <div class="bg-image"></div>
+      <div class="fog-parent">
+        <div class="fog fog-animation"></div>
+      </div>
+
+      <div class="gloster-title">
+        <img
+          src="./assets/now-introducing-gloster.png"
+          class="gloster-introducing"
+          alt="Now Introducing Gloster"
+        />
+        <img
+          src="./assets/gloster-front-view.png"
+          class="gloster-front-view"
+          alt="Gloster Front view"
+          srcset=""
+        />
+      </div>
+
+      <div class="mgzs-car-container">
+      </div>
+      <div class="hector-car-container">
+      </div>
+    </div>
+  </body>
+</html>