Anim init

diff --git a/docs/_includes/index/focus.html b/docs/_includes/index/focus.html
index 4282477d28a0370d5716344a1b50e5658a23cdfc..e8e66efb9ce3b40b6b0c373d139ad79bc07dff56 100644 (file)
--- a/docs/_includes/index/focus.html
+++ b/docs/_includes/index/focus.html
@@ -10,13 +10,13 @@
       </p>
       <p class="subtitle is-6">Designed for <strong>mobile</strong> first</p>
       <figure class="bd-focus-icon">
-        <span class="icon is-large">
+        <span class="bd-focus-mobile icon is-large">
           <i class="fas fa-lg fa-mobile-alt"></i>
         </span>
-        <span class="icon is-large">
+        <span class="bd-focus-tablet icon is-large">
           <i class="fas fa-2x fa-tablet-alt"></i>
         </span>
-        <span class="icon is-large">
+        <span class="bd-focus-desktop icon is-large">
           <i class="fas fa-3x fa-desktop"></i>
         </span>
       </figure>
@@ -29,9 +29,15 @@
       <p class="subtitle is-6">
         Just import what you <strong>need</strong>
       </p>
-      <figure class="bd-focus-icon">
-        <span class="icon is-large">
-          <i class="fas fa-3x fa-cubes"></i>
+      <figure class="bd-focus-cubes bd-focus-icon">
+        <span class="bd-focus-cube bd-focus-cube-1 icon is-large">
+          <i class="fas fa-2x fa-cube"></i>
+        </span>
+        <span class="bd-focus-cube bd-focus-cube-2 icon is-large">
+          <i class="fas fa-2x fa-cube"></i>
+        </span>
+        <span class="bd-focus-cube bd-focus-cube-3 icon is-large">
+          <i class="fas fa-2x fa-cube"></i>
         </span>
       </figure>
     </a>
@@ -43,7 +49,7 @@
       <p class="subtitle is-6">
         Built with <strong>Flexbox</strong>
       </p>
-      <figure class="bd-focus-icon">
+      <figure class="bd-focus-css3 bd-focus-icon">
         <span class="icon is-large">
           <i class="fab fa-3x fa-css3"></i>
         </span>
@@ -57,7 +63,7 @@
       <p class="subtitle is-6">
         Open source on <strong>GitHub</strong>
       </p>
-      <figure class="bd-focus-icon">
+      <figure class="bd-focus-github bd-focus-icon">
         <span class="icon is-large">
           <i class="fab fa-3x fa-github-alt"></i>
         </span>

diff --git a/docs/_sass/book.sass b/docs/_sass/book.sass
index 535c29c6683de508a9241dc1b92564267eb98f9f..2f21a4bfa2f6377a6a22c3dd07becc8c04d8c449 100644 (file)
--- a/docs/_sass/book.sass
+++ b/docs/_sass/book.sass
@@ -45,6 +45,7 @@ $book-beige: #FFEDD7
 
 .bd-book-content
   @extend %bd-box
+  box-shadow: 0 3rem 3rem -1rem rgba($black, 0.2)
   max-width: 520px
   padding: 3rem
 

diff --git a/docs/_sass/focus.sass b/docs/_sass/focus.sass
new file mode 100644 (file)
index 0000000..6bdfe88
--- /dev/null
+++ b/docs/_sass/focus.sass
@@ -0,0 +1,130 @@
+@keyframes bdGrow
+  from
+    transform: scale(0)
+  to
+    transform: scale(1)
+
+$cubic-dramatic: cubic-bezier(0, 0.75, 0.25, 1)
+$cubic-less-dramatic: cubic-bezier(0.14, 0.71, 0.29, 0.86)
+$cubic-magic: cubic-bezier(0.175, 0.885, 0.32, 1.275)
+
+$delay: 250ms
+
+%bd-focus-animation
+  animation-duration: 500ms
+  animation-fill-mode: both
+  animation-timing-function: $cubic-less-dramatic
+  transform-origin: center center
+
+.bd-focus-mobile,
+.bd-focus-tablet,
+.bd-focus-desktop
+  @extend %bd-focus-animation
+  animation-name: bdGrow
+  transform-origin: bottom center
+
+.bd-focus-tablet
+  animation-delay: $delay
+
+.bd-focus-desktop
+  animation-delay: $delay * 2
+
+$cube-factor: 10px
+
+@keyframes moveCube1
+  0%
+    transform: translate3d(0, (-5 * $cube-factor), 0)
+    opacity: 0
+  25%, 100%
+    transform: translate3d(0, 0, 0)
+    opacity: 1
+
+@keyframes moveCube2
+  0%
+    transform: translate3d((-4 * $cube-factor), (3 * $cube-factor), 0)
+    opacity: 0
+  25%, 100%
+    transform: translate3d(0, 0, 0)
+    opacity: 1
+
+@keyframes moveCube3
+  0%
+    transform: translate3d((4 * $cube-factor), (3 * $cube-factor), 0)
+    opacity: 0
+  25%, 100%
+    transform: translate3d(0, 0, 0)
+    opacity: 1
+
+%bd-focus-animation-cube
+  @extend %bd-focus-animation
+  animation-iteration-count: infinite
+  animation-direction: alternate
+  animation-duration: 2000ms
+
+.bd-focus-cube-1
+  @extend %bd-focus-animation-cube
+  animation-name: moveCube1
+
+.bd-focus-cube-2
+  @extend %bd-focus-animation-cube
+  animation-name: moveCube2
+  animation-delay: $delay
+
+.bd-focus-cube-3
+  @extend %bd-focus-animation-cube
+  animation-name: moveCube3
+  animation-delay: $delay * 2
+
+@keyframes bdJellyGrow
+  0%
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+  3.4%
+    transform: matrix3d(1.013, 0, 0, 0, 0, 1.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+  4.7%
+    transform: matrix3d(1.018, 0, 0, 0, 0, 1.024, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+  6.81%
+    transform: matrix3d(1.026, 0, 0, 0, 0, 1.036, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+  9.41%
+    transform: matrix3d(1.035, 0, 0, 0, 0, 1.047, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+  10.21%
+    transform: matrix3d(1.038, 0, 0, 0, 0, 1.049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+  13.61%
+    transform: matrix3d(1.045, 0, 0, 0, 0, 1.053, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+  14.11%
+    transform: matrix3d(1.046, 0, 0, 0, 0, 1.053, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+  17.52%
+    transform: matrix3d(1.048, 0, 0, 0, 0, 1.05, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+  18.72%
+    transform: matrix3d(1.048, 0, 0, 0, 0, 1.047, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+  21.32%
+    transform: matrix3d(1.048, 0, 0, 0, 0, 1.043, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+  24.32%
+    transform: matrix3d(1.046, 0, 0, 0, 0, 1.038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+  25.23%
+    transform: matrix3d(1.045, 0, 0, 0, 0, 1.038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+  29.03%
+    transform: matrix3d(1.043, 0, 0, 0, 0, 1.036, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+  29.93%
+    transform: matrix3d(1.042, 0, 0, 0, 0, 1.036, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+  35.54%
+    transform: matrix3d(1.039, 0, 0, 0, 0, 1.038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+  36.74%
+    transform: matrix3d(1.039, 0, 0, 0, 0, 1.039, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+  41.04%
+    transform: matrix3d(1.038, 0, 0, 0, 0, 1.041, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+  44.44%
+    transform: matrix3d(1.039, 0, 0, 0, 0, 1.041, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+  52.15%
+    transform: matrix3d(1.04, 0, 0, 0, 0, 1.04, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+  59.86%
+    transform: matrix3d(1.04, 0, 0, 0, 0, 1.04, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+  63.26%
+    transform: matrix3d(1.04, 0, 0, 0, 0, 1.04, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+  75.28%
+    transform: matrix3d(1.04, 0, 0, 0, 0, 1.04, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+  85.49%
+    transform: matrix3d(1.04, 0, 0, 0, 0, 1.04, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+  90.69%
+    transform: matrix3d(1.04, 0, 0, 0, 0, 1.04, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+  100%
+    transform: matrix3d(1.04, 0, 0, 0, 0, 1.04, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)

diff --git a/docs/_sass/index.sass b/docs/_sass/index.sass
index cefe414c33b826332ed641b0c7ea77f610226b86..1308339c3dec3fda158a5e885250cae95b6a4df1 100644 (file)
--- a/docs/_sass/index.sass
+++ b/docs/_sass/index.sass
@@ -156,24 +156,45 @@
     .title
       color: $link
 
-.bd-focus-icon
-  .fa-mobile-alt
-    color: $purple
-    margin-right: -20px
-  .fa-tablet-alt
-    color: $red
-    margin-left: -20px
-  .fa-desktop
-    color: $orange
-    margin-left: -20px
-    position: relative
-    top: 2px
-  .fa-cubes
-    color: $green
-  .fa-css3
-    color: $blue
-  .fa-github-alt
-    color: $github
+.bd-focus-mobile
+  color: $purple
+  margin-right: -20px
+
+.bd-focus-tablet
+  color: $red
+
+.bd-focus-desktop
+  color: $orange
+  position: relative
+  top: 2px
+
+.bd-focus-cubes
+  position: relative
+  height: 3rem
+  margin: 0 auto
+  width: 3rem
+
+.bd-focus-cube
+  color: $green
+  position: absolute
+
+.bd-focus-cube-1
+  left: 0
+  top: 0
+
+.bd-focus-cube-2
+  left: -1rem
+  top: 23px
+
+.bd-focus-cube-3
+  left: 1rem
+  top: 23px
+
+.bd-focus-css3
+  color: $blue
+
+.bd-focus-github
+  color: $github
 
 // Intro
 

diff --git a/docs/_sass/route.sass b/docs/_sass/route.sass
deleted file mode 100644 (file)
index 3084fb3..0000000
--- a/docs/_sass/route.sass
+++ /dev/null
@@ -1,21 +0,0 @@
-html.route-index
-  .title.is-2,
-  .title.is-3
-    position: relative
-    a
-      color: $text-strong
-      position: relative
-    a:hover
-      color: $blue
-  .hero .title.is-2 a
-    color: $white
-  .hero .title.is-2 a:hover
-    color: $white
-  .hero.is-primary a.column,
-  .hero.is-primary a.column:hover
-    color: $white
-  .hero.is-primary a.column:hover .title strong
-    border-bottom: 1px solid
-  @media screen and (max-width: 979px)
-    .title.is-2 a
-      padding-left: 0

diff --git a/docs/bulma-docs.sass b/docs/bulma-docs.sass
index b8f4fee73f774bf1a753ee7f57962598fa4dad52..cc709167b8b1029342f6dfe58410f81cb0234020 100644 (file)
--- a/docs/bulma-docs.sass
+++ b/docs/bulma-docs.sass
@@ -36,7 +36,7 @@ $navbar-item-img-max-height: none
 %bd-box
   background-color: $white
   border-radius: $radius-large
-  box-shadow: 0 1.5rem 1.5rem -1.25rem rgba($black, 0.1)
+  box-shadow: 0 1.5rem 1.5rem -1.25rem rgba($black, 0.05)
   display: block
 
 =selection($current-selector: false)
@@ -62,7 +62,6 @@ $navbar-item-img-max-height: none
 @import "./_sass/example"
 @import "./_sass/callout"
 @import "./_sass/bsa"
-// @import "./_sass/route"
 @import "./_sass/twitter"
 @import "./_sass/expo"
 @import "./_sass/love"
@@ -72,3 +71,4 @@ $navbar-item-img-max-height: none
 @import "./_sass/sponsors"
 @import "./_sass/book"
 @import "./_sass/native"
+@import "./_sass/focus"

diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 5f0c7692e820e65a9ec0fed43112ec35792ca740..77aeb2af79d5fd4eb87f5f5cf5ebfc11ac0e6f40 100644 (file)
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -9604,7 +9604,7 @@ label.panel-block:hover {
 .bd-footer-support, .bd-footer-star, .bd-book-content {
   background-color: white;
   border-radius: 6px;
-  box-shadow: 0 1.5rem 1.5rem -1.25rem rgba(10, 10, 10, 0.1);
+  box-shadow: 0 1.5rem 1.5rem -1.25rem rgba(10, 10, 10, 0.05);
   display: block;
 }
 
@@ -10512,32 +10512,53 @@ svg {
   color: #3273dc;
 }
 
-.bd-focus-icon .fa-mobile-alt {
+.bd-focus-mobile {
   color: #b86bff;
   margin-right: -20px;
 }
 
-.bd-focus-icon .fa-tablet-alt {
+.bd-focus-tablet {
   color: #ff3860;
-  margin-left: -20px;
 }
 
-.bd-focus-icon .fa-desktop {
+.bd-focus-desktop {
   color: #ff470f;
-  margin-left: -20px;
   position: relative;
   top: 2px;
 }
 
-.bd-focus-icon .fa-cubes {
+.bd-focus-cubes {
+  position: relative;
+  height: 3rem;
+  margin: 0 auto;
+  width: 3rem;
+}
+
+.bd-focus-cube {
   color: #23d160;
+  position: absolute;
+}
+
+.bd-focus-cube-1 {
+  left: 0;
+  top: 0;
+}
+
+.bd-focus-cube-2 {
+  left: -1rem;
+  top: 23px;
+}
+
+.bd-focus-cube-3 {
+  left: 1rem;
+  top: 23px;
 }
 
-.bd-focus-icon .fa-css3 {
+.bd-focus-css3 {
   color: #3273dc;
 }
 
-.bd-focus-icon .fa-github-alt {
+.bd-focus-github {
   color: #333333;
 }
 
@@ -12814,6 +12835,7 @@ svg {
 }
 
 .bd-book-content {
+  box-shadow: 0 3rem 3rem -1rem rgba(10, 10, 10, 0.2);
   max-width: 520px;
   padding: 3rem;
 }
@@ -13073,3 +13095,170 @@ svg {
     font-size: 1.25rem;
   }
 }
+
+@keyframes bdGrow {
+  from {
+    transform: scale(0);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+
+.bd-focus-mobile,
+.bd-focus-tablet,
+.bd-focus-desktop, .bd-focus-cube-1, .bd-focus-cube-2, .bd-focus-cube-3 {
+  animation-duration: 500ms;
+  animation-fill-mode: both;
+  animation-timing-function: cubic-bezier(0.14, 0.71, 0.29, 0.86);
+  transform-origin: center center;
+}
+
+.bd-focus-mobile,
+.bd-focus-tablet,
+.bd-focus-desktop {
+  animation-name: bdGrow;
+  transform-origin: bottom center;
+}
+
+.bd-focus-tablet {
+  animation-delay: 250ms;
+}
+
+.bd-focus-desktop {
+  animation-delay: 500ms;
+}
+
+@keyframes moveCube1 {
+  0% {
+    transform: translate3d(0, -50px, 0);
+    opacity: 0;
+  }
+  25%, 100% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes moveCube2 {
+  0% {
+    transform: translate3d(-40px, 30px, 0);
+    opacity: 0;
+  }
+  25%, 100% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes moveCube3 {
+  0% {
+    transform: translate3d(40px, 30px, 0);
+    opacity: 0;
+  }
+  25%, 100% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+.bd-focus-cube-1, .bd-focus-cube-2, .bd-focus-cube-3 {
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+  animation-duration: 2000ms;
+}
+
+.bd-focus-cube-1 {
+  animation-name: moveCube1;
+}
+
+.bd-focus-cube-2 {
+  animation-name: moveCube2;
+  animation-delay: 250ms;
+}
+
+.bd-focus-cube-3 {
+  animation-name: moveCube3;
+  animation-delay: 500ms;
+}
+
+@keyframes bdJellyGrow {
+  0% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  3.4% {
+    transform: matrix3d(1.013, 0, 0, 0, 0, 1.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  4.7% {
+    transform: matrix3d(1.018, 0, 0, 0, 0, 1.024, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  6.81% {
+    transform: matrix3d(1.026, 0, 0, 0, 0, 1.036, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  9.41% {
+    transform: matrix3d(1.035, 0, 0, 0, 0, 1.047, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  10.21% {
+    transform: matrix3d(1.038, 0, 0, 0, 0, 1.049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  13.61% {
+    transform: matrix3d(1.045, 0, 0, 0, 0, 1.053, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  14.11% {
+    transform: matrix3d(1.046, 0, 0, 0, 0, 1.053, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  17.52% {
+    transform: matrix3d(1.048, 0, 0, 0, 0, 1.05, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  18.72% {
+    transform: matrix3d(1.048, 0, 0, 0, 0, 1.047, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  21.32% {
+    transform: matrix3d(1.048, 0, 0, 0, 0, 1.043, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  24.32% {
+    transform: matrix3d(1.046, 0, 0, 0, 0, 1.038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  25.23% {
+    transform: matrix3d(1.045, 0, 0, 0, 0, 1.038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  29.03% {
+    transform: matrix3d(1.043, 0, 0, 0, 0, 1.036, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  29.93% {
+    transform: matrix3d(1.042, 0, 0, 0, 0, 1.036, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  35.54% {
+    transform: matrix3d(1.039, 0, 0, 0, 0, 1.038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  36.74% {
+    transform: matrix3d(1.039, 0, 0, 0, 0, 1.039, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  41.04% {
+    transform: matrix3d(1.038, 0, 0, 0, 0, 1.041, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  44.44% {
+    transform: matrix3d(1.039, 0, 0, 0, 0, 1.041, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  52.15% {
+    transform: matrix3d(1.04, 0, 0, 0, 0, 1.04, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  59.86% {
+    transform: matrix3d(1.04, 0, 0, 0, 0, 1.04, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  63.26% {
+    transform: matrix3d(1.04, 0, 0, 0, 0, 1.04, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  75.28% {
+    transform: matrix3d(1.04, 0, 0, 0, 0, 1.04, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  85.49% {
+    transform: matrix3d(1.04, 0, 0, 0, 0, 1.04, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  90.69% {
+    transform: matrix3d(1.04, 0, 0, 0, 0, 1.04, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  100% {
+    transform: matrix3d(1.04, 0, 0, 0, 0, 1.04, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+}

diff --git a/docs/test.html b/docs/test.html
index 0823163cebf686fa0cfa3acb1bf5ee866dba4ef4..0a6539342a57d08e7da6490be767a7fbb5c72255 100644 (file)
--- a/docs/test.html
+++ b/docs/test.html
@@ -21,7 +21,7 @@
     <!-- <iframe width="560" height="315" src="https://www.youtube.com/embed/hK8ONv4wcbA" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> -->
     <!-- <iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe> -->
     {% include global/navbar.html %}
-    {% include footer/main.html %}
+    {% include index/focus.html %}
     <!-- {% include test/from-to.html %} -->
     <!-- {% include test/features.html %} -->
     <script async defer id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>