made rainbow text transistion actually smooth

9551-Dev · Mar 11, 2024 · ebae42b · ebae42b
1 parent c8b59aa
commit ebae42b
Showing 1 changed file with 20 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -21,21 +21,31 @@
 
         .rainbow-text {
             font-weight: bold;
-            animation: rainbow-animation 5s infinite linear;
+            animation: rainbow-animation 7s infinite linear;
         }
 
         @keyframes rainbow-animation {
             0%   {color: hsl(0, 100%, 50%);}
-            10%  {color: hsl(36, 100%, 50%);}
-            20%  {color: hsl(72, 100%, 50%);}
-            30%  {color: hsl(144, 100%, 50%);}
-            40%  {color: hsl(216, 100%, 50%);}
-            50%  {color: hsl(288, 100%, 50%);}
-            60%  {color: hsl(324, 100%, 50%);}
-            70%  {color: hsl(0, 100%, 50%);}
-            80%  {color: hsl(36, 100%, 50%);}
+            5%   {color: hsl(36, 100%, 50%);}
+            10%  {color: hsl(72, 100%, 50%);}
+            15%  {color: hsl(144, 100%, 50%);}
+            20%  {color: hsl(216, 100%, 50%);}
+            25%  {color: hsl(288, 100%, 50%);}
+            30%  {color: hsl(324, 100%, 50%);}
+            35%  {color: hsl(0, 100%, 50%);}
+            40%  {color: hsl(36, 100%, 50%);}
+            45%  {color: hsl(72, 100%, 50%);}
+            50%  {color: hsl(144, 100%, 50%);}
+            55%  {color: hsl(72, 100%, 50%);}
+            60%  {color: hsl(36, 100%, 50%);}
+            65%  {color: hsl(0, 100%, 50%);}
+            70%  {color: hsl(324, 100%, 50%);}
+            75%  {color: hsl(288, 100%, 50%);}
+            80%  {color: hsl(216, 100%, 50%);}
+            85%  {color: hsl(144, 100%, 50%);}
             90%  {color: hsl(72, 100%, 50%);}
-            100% {color: hsl(144, 100%, 50%);}
+            95%  {color: hsl(36, 100%, 50%);}
+            100% {color: hsl(0, 100%, 50%);}
         }
 
         .container {