diff --git a/scroll-animation/index.html b/scroll-animation/index.html
index 7f2e1d0..4f68cdc 100644
--- a/scroll-animation/index.html
+++ b/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>
diff --git a/scroll-animation/style.css b/scroll-animation/style.css
index a0e7490..ba837b8 100644
--- a/scroll-animation/style.css
+++ b/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.show {
-  transform: translateX(0);
 }
 
 .box h2 {
   font-size: 45px;
 }
+
+@keyframes appear{
+  from{
+    transform: translateX(-100px);
+  }to{
+    transform: translateX(100px);
+  }
+}
\ No newline at end of file