docs: improve logo animation (rsuite#1129)

mehaksaini2811 · Jun 16, 2020 · 94cfcd1 · 94cfcd1
1 parent ca41fb4
commit 94cfcd1
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 6 deletions.
diff --git a/docs/components/Logo/Logo.tsx b/docs/components/Logo/Logo.tsx
@@ -49,14 +49,15 @@ export default function Logo({ width, height, className = '' }: LogoProps) {
         <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
           <g id="Group-22" transform="translate(3.000000, 6.000000)">
             <polyline
-              id="Path-4-Copy-3"
+              className="polyline-axis"
               stroke="url(#linearGradient-1)"
               strokeWidth="12"
               strokeLinecap="round"
               strokeLinejoin="round"
               points="111 31 57 0 19 22 95 104 57 126 3 95"
             />
             <polyline
+              className="polyline-limb"
               id="Path-5-Copy-7"
               stroke="url(#linearGradient-2)"
               strokeWidth="12"
@@ -66,15 +67,15 @@ export default function Logo({ width, height, className = '' }: LogoProps) {
               points="41 31 3 54 41 95 41 52"
             />
             <polyline
-              id="Path-5-Copy-7"
+              className="polyline-limb"
               stroke="url(#linearGradient-3)"
               strokeWidth="12"
               strokeLinecap="round"
               strokeLinejoin="round"
               points="111 31 73 54 111 95 111 52"
             />
-            <circle id="Oval-Copy-11" fill="#6594ED" cx="3" cy="95" r="3" />
-            <circle id="Oval-Copy-12" fill="#6594ED" cx="111" cy="31" r="3" />
+            <circle className="circle" fill="#6594ED" cx="3" cy="95" r="3" />
+            <circle fill="#6594ED" cx="111" cy="31" r="3" />
           </g>
         </g>
       </svg>

diff --git a/docs/components/Logo/styles.less b/docs/components/Logo/styles.less
@@ -9,9 +9,18 @@
   .cls-2 {
     fill-rule: evenodd;
   }
-}
 
+  .polyline-limb {
+    animation: limbLineMove 3s ease-out 1;
+  }
+  .polyline-axis {
+    animation: axisLineMove 2s ease-out 1;
+  }
 
+  .circle {
+    animation: circleMove 2s ease-out 1;
+  }
+}
 
 .logo-animated {
   animation-duration: 1s;
@@ -40,13 +49,13 @@
     transform: scale3d(0.3, 0.3, 0.3);
   }
   20% {
+    opacity: 1;
     transform: scale3d(1.1, 1.1, 1.1);
   }
   40% {
     transform: scale3d(0.9, 0.9, 0.9);
   }
   60% {
-    opacity: 1;
     transform: scale3d(1.03, 1.03, 1.03);
   }
   80% {
@@ -57,3 +66,34 @@
     transform: scale3d(1, 1, 1);
   }
 }
+
+@keyframes axisLineMove {
+  0% {
+    stroke-dasharray: 0, 500;
+  }
+  100% {
+    stroke-dasharray: 500, 500;
+  }
+}
+
+@keyframes limbLineMove {
+  0% {
+    stroke-dasharray: 0, 200;
+    stroke: transparent;
+  }
+  50% {
+    stroke-dasharray: 0, 200;
+  }
+  100% {
+    stroke-dasharray: 200, 200;
+  }
+}
+
+@keyframes circleMove {
+  0% {
+    fill: transparent;
+  }
+  50% {
+    fill: transparent;
+  }
+}