Animate the bear even more

Author: Hoverbear

sass/_animations.scss

@@ -1,10 +1,25 @@
 @keyframes fade-in {
   0% {
      opacity: 0;
-   }
+  }
   100% {
      opacity: 1;
-   }
+  }
+}
+
+@keyframes delayed-stroke-in {
+  0% {
+     opacity: 0;
+  } 
+  50% {
+     opacity: 1;
+     fill: rgba(255, 255, 255, 0);
+  }
+  100% {
+    stroke-dashoffset: 0;
+    opacity: 1;
+    fill: rgba(255, 255, 255, 100);
+ }
 }
 
 @keyframes twinkle {

sass/main.scss

@@ -45,15 +45,22 @@ svg.logo {
   animation-duration: 1.5s;
 
   #bear {
-    fill: white;
-    opacity: 0;
-
-    animation: fade-in;
-    animation-timing-function:ease-in;
-    animation-delay: 3s;
-    animation-iteration-count: 1;
-    animation-fill-mode: both;
-    animation-duration: 1.5s;
+    fill: none;
+    stroke: white;
+    
+    & path {
+      opacity: 0;
+      stroke-dashoffset: 4000;
+      stroke-dasharray: 4000;
+      
+      animation: delayed-stroke-in;
+      animation-timing-function:ease-in;
+      animation-delay: 3s;
+      animation-iteration-count: 1;
+      animation-fill-mode: both;
+      animation-duration: 4.5s;
+    }
+
   }
 
   #star-links {