feat: refactor letter by letter reveal animation

Ritika-Agrawal811 · Ritika-Agrawal811 · commit 668a07f4ce4d · 2025-04-23T22:15:08.000+05:30
diff --git a/Text Animations/Letter_By_Letter_Reveal/index.html b/Text Animations/Letter_By_Letter_Reveal/index.html
@@ -7,12 +7,12 @@
     <title>Letter By Letter Reveal Animation</title>
   </head>
   <body>
-    <h1>
-      <span class="letter">u</span>
-      <span class="letter">k</span>
-      <span class="letter">i</span>
-      <span class="letter">y</span>
-      <span class="letter">o</span>
-    </h1>
+      <h1>
+        <span class="letter" style="--delay: 0ms;">u</span>
+        <span class="letter" style="--delay: 250ms;">k</span>
+        <span class="letter" style="--delay: 500ms;">i</span>
+        <span class="letter" style="--delay: 750ms;">y</span>
+        <span class="letter" style="--delay: 1000ms;">o</span>      
+      </h1>
   </body>
 </html>
diff --git a/Text Animations/Letter_By_Letter_Reveal/style.css b/Text Animations/Letter_By_Letter_Reveal/style.css
@@ -31,22 +31,7 @@ h1 {
   background: #add8e6;
   animation: animate 500ms linear 1;
   animation-fill-mode: forwards;
-}
-
-.letter:nth-child(2)::before {
-  animation-delay: 250ms;
-}
-
-.letter:nth-child(3)::before {
-  animation-delay: 500ms;
-}
-
-.letter:nth-child(4)::before {
-  animation-delay: 1s;
-}
-
-.letter:nth-child(5)::before {
-  animation-delay: 1.5s;
+  animation-delay: var(--delay);
 }
 
 @keyframes animate {
