down youtube channel

scroll-animation/index.html

@@ -21,6 +21,5 @@
     <div class="box"><h2>Content</h2></div>
     <div class="box"><h2>Content</h2></div>
     <div class="box"><h2>Content</h2></div>
-    <script src="script.js"></script>
   </body>
 </html>

scroll-animation/style.css

@@ -29,19 +29,21 @@ h1 {
   height: 200px;
   margin: 10px;
   border-radius: 10px;
+  transform: translateX(-100px);
+  animation: appear linear;
+  animation-timeline: view();
+  animation-range: entry 0% cover 100%;
   box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.3);
-  transform: translateX(400%);
-  transition: transform 0.4s ease;
 }
 
-.box:nth-of-type(even) {
-  transform: translateX(-400%);
+.box h2 {
+  font-size: 45px;
 }
 
-.box.show {
-  transform: translateX(0);
+@keyframes appear{
+  from{
+    transform: translateX(-100px);
+  }to{
+    transform: translateX(100px);
   }
-
-.box h2 {
-  font-size: 45px;
 }