Animation styles

Author: isaacpitwa

applications/cartoon-type-text/styles.css

@@ -0,0 +1,53 @@
+svg {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 740px;
+    height: 140px;
+    transform: translate(-50%, -50%);
+  }
+  
+  .path {
+    stroke-dashoffset: 0;
+    stroke-dasharray: 100%;
+    animation: dash 4.5s linear;
+  }
+  
+  .path:nth-child(10) {
+    animation-delay: -2s;
+  }
+  .path:nth-child(9) {
+    animation-delay: -1.75s;
+  }
+  .path:nth-child(8) {
+    animation-delay: -1.5s;
+  }
+  .path:nth-child(7) {
+    animation-delay: -1.5s;
+  }
+  .path:nth-child(6) {
+    animation-delay: -1.25s;
+  }
+  .path:nth-child(5) {
+    animation-delay: -1s;
+  }
+  .path:nth-child(4) {
+    animation-delay: -0.75s;
+  }
+  .path:nth-child(3) {
+    animation-delay: -0.5s;
+  }
+  .path:nth-child(2) {
+    animation-delay: -0.25s;
+  }
+  
+  @keyframes dash {
+    0%,
+    50% {
+      stroke-dashoffset: 100%;
+    }
+    to {
+      stroke-dashoffset: 0;
+    }
+  }
+