Add logo svg animation

docs/bulma-docs.sass

@@ -77,18 +77,82 @@ $twitter: #55acee
     border-color: $twitter
     color: $white
 
+@keyframes floatUp
+  from
+    box-shadow: 0 0 0 rgba($black, 0), 0 0 0 rgba($black, 0), 0 0 0 rgba($black, 0)
+    transform: scale(0.86)
+  to
+    box-shadow: 0 20px 60px rgba($black, 0.05), 0 5px 10px rgba($black, 0.1), 0 1px 1px rgba($black, 0.2)
+    transform: scale(1)
+
+@keyframes strokePath
+  from
+    stroke-dashoffset: 880
+  to
+    stroke-dashoffset: 0
+
+@keyframes fadeIn
+  from
+    opacity: 0
+    transform: scale(0.86)
+  to
+    opacity: 1
+    transform: scale(1)
+
+@keyframes fadeOut
+  0%
+    opacity: 1
+    transform: scale(0.86)
+  67%
+    opacity: 1
+    transform: scale(0.86)
+  100%
+    opacity: 0
+    transform: scale(1)
+
+$curve: cubic-bezier(0, 0.71, 0.29, 1)
+
 #b
+  animation-delay: 1s
+  animation-duration: 1s
+  animation-fill-mode: both
+  animation-name: floatUp
+  animation-timing-function: $curve
   border-radius: 20px
-  box-shadow: 0 20px 60px rgba($black, 0.05), 0 5px 10px rgba($black, 0.1), 0 1px 1px rgba($black, 0.2)
   display: inline-block
   height: 240px
   margin-bottom: 40px
+  position: relative
   vertical-align: top
   width: 240px
   svg
+    +overlay
     display: block
     height: 240px
     width: 240px
+    &:first-child
+      animation-duration: 1.5s
+      animation-fill-mode: both
+      animation-name: fadeOut
+      animation-timing-function: $curve
+      g
+        animation-duration: 1s
+        animation-fill-mode: both
+        animation-name: strokePath
+        animation-timing-function: $curve
+        fill: none
+        stroke: $turquoise
+        stroke-dasharray: 880
+        stroke-width: 2px
+    &:last-child
+      animation-delay: 1s
+      animation-duration: 1s
+      animation-fill-mode: both
+      animation-name: fadeIn
+      animation-timing-function: $curve
+      g
+        fill: $turquoise
+
   +mobile
     border-radius: 10px
     height: 120px