improve main title animation

mate-academy · Jul 8, 2024 · d94a2dd · d94a2dd
1 parent 975a77b
commit d94a2dd
Showing 1 changed file with 26 additions and 11 deletions.
diff --git a/src/styles/blocks/_header.scss b/src/styles/blocks/_header.scss
@@ -54,20 +54,36 @@
       margin-bottom: 64px;
     }
 
-    animation: title $transition-time linear 1s;
+    animation: title 1.5s linear;
 
     @keyframes title {
       0% {
+        transform: scale(0.1);
+      }
+      15% {
+        transform: rotateZ(180deg) scale(0.25);
+      }
+      30% {
+        transform: rotateZ(360deg) scale(0.5);
+      }
+      45% {
+        transform: rotateZ(540deg) scale(0.75);
+      }
+      60% {
+        transform: rotateZ(720deg) scale(1);
+      }
+      70% {
+        transform: scale(1);
         background: linear-gradient(30deg, #fff 0%, $c-accent-orange 10%);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
       }
-      10% {
+      73% {
         background: linear-gradient(30deg, #fff 10%, $c-accent-orange 20%);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
       }
-      20% {
+      76% {
         background: linear-gradient(
           30deg,
           $c-accent-orange 10%,
@@ -77,7 +93,7 @@
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
       }
-      30% {
+      79% {
         background: linear-gradient(
           30deg,
           $c-accent-orange 20%,
@@ -87,7 +103,7 @@
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
       }
-      40% {
+      82% {
         background: linear-gradient(
           30deg,
           $c-accent-orange 30%,
@@ -97,7 +113,7 @@
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
       }
-      50% {
+      85% {
         background: linear-gradient(
           30deg,
           $c-accent-orange 40%,
@@ -107,9 +123,8 @@
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         transform: scale(1.2);
-        text-shadow: 0 0 50px $c-white;
       }
-      60% {
+      88% {
         background: linear-gradient(
           30deg,
           $c-accent-orange 50%,
@@ -119,7 +134,7 @@
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
       }
-      70% {
+      91% {
         background: linear-gradient(
           30deg,
           $c-accent-orange 60%,
@@ -129,7 +144,7 @@
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
       }
-      80% {
+      94% {
         background: linear-gradient(
           30deg,
           $c-accent-orange 70%,
@@ -139,7 +154,7 @@
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
       }
-      90% {
+      97% {
         background: linear-gradient(
           30deg,
           $c-accent-orange 80%,