Add other animations

docs/_sass/focus.sass

@@ -28,59 +28,87 @@ $duration: 500ms
 $delay: 250ms
 $wait: 500ms
 
+$focus-delay: 1s
+
 %bd-focus-animation
+  animation-duration: $duration
   animation-fill-mode: both
   animation-timing-function: $cubic-less-dramatic
   transform-origin: center center
 
 $delay-subtitle: $delay / 2
 
+// Intro
+.intro-title
+  @extend %bd-focus-animation
+  animation-name: bdSlideDown
+
+.intro-ghbtns,
+.intro-author
+  @extend %bd-focus-animation
+  animation-delay: $focus-delay
+  animation-duration: $duration * 2
+  animation-name: bdFadeIn
+
+.intro-npm
+  @extend %bd-focus-animation
+  animation-delay: $delay
+  animation-name: bdSlowIn
+
+.intro-buttons .button
+  @extend %bd-focus-animation
+  animation-name: bdSlowIn
+  &:first-child
+    animation-delay: $delay * 2
+  &:last-child
+    animation-delay: $delay * 3
+
 // Titles
 .bd-focus-item
   .title
     @extend %bd-focus-animation
-    animation-duration: $duration
     animation-name: bdSlideDown
   .subtitle
     @extend %bd-focus-animation
-    animation-duration: $duration
     animation-name: bdSlideUp
   &:nth-child(1)
+    .title
+      animation-delay: $focus-delay
     .subtitle
-      animation-delay: $delay-subtitle
+      animation-delay: $focus-delay + $delay-subtitle
   &:nth-child(2)
     .title
-      animation-delay: $wait
+      animation-delay: $focus-delay + $wait
     .subtitle
-      animation-delay: $wait + $delay-subtitle
+      animation-delay: $focus-delay + $wait + $delay-subtitle
   &:nth-child(3)
     .title
-      animation-delay: ($wait * 2)
+      animation-delay: $focus-delay + ($wait * 2)
     .subtitle
-      animation-delay: ($wait * 2) + $delay-subtitle
+      animation-delay: $focus-delay + ($wait * 2) + $delay-subtitle
   &:nth-child(4)
     .title
-      animation-delay: ($wait * 3)
+      animation-delay: $focus-delay + ($wait * 3)
     .subtitle
-      animation-delay: ($wait * 3) + $delay-subtitle
+      animation-delay: $focus-delay + ($wait * 3) + $delay-subtitle
 
 // Devices
 %bd-focus-animation-device
   @extend %bd-focus-animation
-  animation-duration: $duration
   animation-name: bdGrow
   transform-origin: bottom center
 
 .bd-focus-mobile
   @extend %bd-focus-animation-device
+  animation-delay: $focus-delay
 
 .bd-focus-tablet
   @extend %bd-focus-animation-device
-  animation-delay: $delay
+  animation-delay: $focus-delay + $delay
 
 .bd-focus-desktop
   @extend %bd-focus-animation-device
-  animation-delay: $delay * 2
+  animation-delay: $focus-delay + ($delay * 2)
 
 // Cubes
 $cube-factor: 10px
@@ -117,20 +145,34 @@ $cube-factor: 10px
 
 .bd-focus-cube-1
   @extend %bd-focus-animation-cube
-  animation-delay: $wait
+  animation-delay: $focus-delay + $wait
   animation-name: bdCube1
 
 .bd-focus-cube-2
   @extend %bd-focus-animation-cube
   animation-name: bdCube2
-  animation-delay: $wait + $delay
+  animation-delay: $focus-delay + $wait + $delay
 
 .bd-focus-cube-3
   @extend %bd-focus-animation-cube
   animation-name: bdCube3
-  animation-delay: $wait + ($delay * 2)
+  animation-delay: $focus-delay + $wait + ($delay * 2)
 
-@keyframes fadeIn
+@keyframes bdFadeIn
+  from
+    opacity: 0
+  to
+    opacity: 1
+
+@keyframes bdSlowIn
+  from
+    opacity: 0
+    transform: scale(0.9)
+  to
+    opacity: 1
+    transform: scale(1)
+
+@keyframes bdScaleIn
   from
     opacity: 0
     transform: scale(0)
@@ -140,13 +182,12 @@ $cube-factor: 10px
 
 .bd-focus-css3
   @extend %bd-focus-animation
-  animation-delay: $wait * 2
+  animation-delay: $focus-delay + ($wait * 2)
-  animation-duration: $duration
+  animation-name: bdScaleIn
-  animation-name: fadeIn
 
 .bd-focus-github
   @extend %bd-focus-animation
-  animation-delay: $wait * 3
+  animation-delay: $focus-delay + ($wait * 3)
   animation-duration: $duration * 3
   animation-name: bdJellyPop
 

docs/css/bulma-docs.css

@@ -13169,62 +13169,97 @@ svg {
   }
 }
 
-.bd-focus-item .title, .bd-focus-item .subtitle, .bd-focus-mobile, .bd-focus-tablet, .bd-focus-desktop, .bd-focus-cube-1, .bd-focus-cube-2, .bd-focus-cube-3, .bd-focus-css3, .bd-focus-github {
+.intro-title, .intro-ghbtns,
+.intro-author, .intro-npm, .intro-buttons .button, .bd-focus-item .title, .bd-focus-item .subtitle, .bd-focus-mobile, .bd-focus-tablet, .bd-focus-desktop, .bd-focus-cube-1, .bd-focus-cube-2, .bd-focus-cube-3, .bd-focus-css3, .bd-focus-github {
+  animation-duration: 500ms;
   animation-fill-mode: both;
   animation-timing-function: cubic-bezier(0.14, 0.71, 0.29, 0.86);
   transform-origin: center center;
 }
 
+.intro-title {
+  animation-name: bdSlideDown;
+}
+
+.intro-ghbtns,
+.intro-author {
+  animation-delay: 1s;
+  animation-duration: 1000ms;
+  animation-name: bdFadeIn;
+}
+
+.intro-npm {
+  animation-delay: 250ms;
+  animation-name: bdSlowIn;
+}
+
+.intro-buttons .button {
+  animation-name: bdSlowIn;
+}
+
+.intro-buttons .button:first-child {
+  animation-delay: 500ms;
+}
+
+.intro-buttons .button:last-child {
+  animation-delay: 750ms;
+}
+
 .bd-focus-item .title {
-  animation-duration: 500ms;
   animation-name: bdSlideDown;
 }
 
 .bd-focus-item .subtitle {
-  animation-duration: 500ms;
   animation-name: bdSlideUp;
 }
 
+.bd-focus-item:nth-child(1) .title {
+  animation-delay: 1s;
+}
+
 .bd-focus-item:nth-child(1) .subtitle {
-  animation-delay: 125ms;
+  animation-delay: 1.125s;
 }
 
 .bd-focus-item:nth-child(2) .title {
-  animation-delay: 500ms;
+  animation-delay: 1.5s;
 }
 
 .bd-focus-item:nth-child(2) .subtitle {
-  animation-delay: 625ms;
+  animation-delay: 1.625s;
 }
 
 .bd-focus-item:nth-child(3) .title {
-  animation-delay: 1000ms;
+  animation-delay: 2s;
 }
 
 .bd-focus-item:nth-child(3) .subtitle {
-  animation-delay: 1125ms;
+  animation-delay: 2.125s;
 }
 
 .bd-focus-item:nth-child(4) .title {
-  animation-delay: 1500ms;
+  animation-delay: 2.5s;
 }
 
 .bd-focus-item:nth-child(4) .subtitle {
-  animation-delay: 1625ms;
+  animation-delay: 2.625s;
 }
 
 .bd-focus-mobile, .bd-focus-tablet, .bd-focus-desktop {
-  animation-duration: 500ms;
   animation-name: bdGrow;
   transform-origin: bottom center;
 }
 
+.bd-focus-mobile {
+  animation-delay: 1s;
+}
+
 .bd-focus-tablet {
-  animation-delay: 250ms;
+  animation-delay: 1.25s;
 }
 
 .bd-focus-desktop {
-  animation-delay: 500ms;
+  animation-delay: 1.5s;
 }
 
 @keyframes bdCube1 {
@@ -13267,21 +13302,41 @@ svg {
 }
 
 .bd-focus-cube-1 {
-  animation-delay: 500ms;
+  animation-delay: 1.5s;
   animation-name: bdCube1;
 }
 
 .bd-focus-cube-2 {
   animation-name: bdCube2;
-  animation-delay: 750ms;
+  animation-delay: 1.75s;
 }
 
 .bd-focus-cube-3 {
   animation-name: bdCube3;
-  animation-delay: 1000ms;
+  animation-delay: 2s;
 }
 
-@keyframes fadeIn {
+@keyframes bdFadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes bdSlowIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes bdScaleIn {
   from {
     opacity: 0;
     transform: scale(0);
@@ -13293,13 +13348,12 @@ svg {
 }
 
 .bd-focus-css3 {
-  animation-delay: 1000ms;
+  animation-delay: 2s;
-  animation-duration: 500ms;
+  animation-name: bdScaleIn;
-  animation-name: fadeIn;
 }
 
 .bd-focus-github {
-  animation-delay: 1500ms;
+  animation-delay: 2.5s;
   animation-duration: 1500ms;
   animation-name: bdJellyPop;
 }