Finish animations

diff --git a/docs/_includes/index/focus.html b/docs/_includes/index/focus.html
index e8e66efb9ce3b40b6b0c373d139ad79bc07dff56..3fa6cff8e012520fd6703b7a5c29ada42abea488 100644 (file)
--- a/docs/_includes/index/focus.html
+++ b/docs/_includes/index/focus.html
@@ -49,8 +49,8 @@
       <p class="subtitle is-6">
         Built with <strong>Flexbox</strong>
       </p>
-      <figure class="bd-focus-css3 bd-focus-icon">
-        <span class="icon is-large">
+      <figure class="bd-focus-icon">
+        <span class="bd-focus-css3 icon is-large">
           <i class="fab fa-3x fa-css3"></i>
         </span>
       </figure>
@@ -63,8 +63,8 @@
       <p class="subtitle is-6">
         Open source on <strong>GitHub</strong>
       </p>
-      <figure class="bd-focus-github bd-focus-icon">
-        <span class="icon is-large">
+      <figure class="bd-focus-icon">
+        <span class="bd-focus-github icon is-large">
           <i class="fab fa-3x fa-github-alt"></i>
         </span>
       </figure>

diff --git a/docs/_sass/focus.sass b/docs/_sass/focus.sass
index 6bdfe8887a2831ba5331adf9a95882ae7109a7d7..d39b79aed51b410a0553fc66e7447684015987d7 100644 (file)
--- a/docs/_sass/focus.sass
+++ b/docs/_sass/focus.sass
@@ -4,34 +4,88 @@
   to
     transform: scale(1)
 
+@keyframes bdSlideDown
+  from
+    opacity: 0
+    transform: translateY(-1rem)
+  to
+    opacity: 1
+    transform: translateY(0)
+
+@keyframes bdSlideUp
+  from
+    opacity: 0
+    transform: translateY(1rem)
+  to
+    opacity: 1
+    transform: translateY(0)
+
 $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)
 
+$duration: 500ms
 $delay: 250ms
+$wait: 500ms
 
 %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
+$delay-subtitle: $delay / 2
+
+// 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)
+    .subtitle
+      animation-delay: $delay-subtitle
+  &:nth-child(2)
+    .title
+      animation-delay: $wait
+    .subtitle
+      animation-delay: $wait + $delay-subtitle
+  &:nth-child(3)
+    .title
+      animation-delay: ($wait * 2)
+    .subtitle
+      animation-delay: ($wait * 2) + $delay-subtitle
+  &:nth-child(4)
+    .title
+      animation-delay: ($wait * 3)
+    .subtitle
+      animation-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
+
 .bd-focus-tablet
+  @extend %bd-focus-animation-device
   animation-delay: $delay
 
 .bd-focus-desktop
+  @extend %bd-focus-animation-device
   animation-delay: $delay * 2
 
+// Cubes
 $cube-factor: 10px
 
-@keyframes moveCube1
+@keyframes bdCube1
   0%
     transform: translate3d(0, (-5 * $cube-factor), 0)
     opacity: 0
@@ -39,7 +93,7 @@ $cube-factor: 10px
     transform: translate3d(0, 0, 0)
     opacity: 1
 
-@keyframes moveCube2
+@keyframes bdCube2
   0%
     transform: translate3d((-4 * $cube-factor), (3 * $cube-factor), 0)
     opacity: 0
@@ -47,7 +101,7 @@ $cube-factor: 10px
     transform: translate3d(0, 0, 0)
     opacity: 1
 
-@keyframes moveCube3
+@keyframes bdCube3
   0%
     transform: translate3d((4 * $cube-factor), (3 * $cube-factor), 0)
     opacity: 0
@@ -57,74 +111,98 @@ $cube-factor: 10px
 
 %bd-focus-animation-cube
   @extend %bd-focus-animation
-  animation-iteration-count: infinite
   animation-direction: alternate
-  animation-duration: 2000ms
+  animation-duration: $duration * 4
+  animation-iteration-count: infinite
 
 .bd-focus-cube-1
   @extend %bd-focus-animation-cube
-  animation-name: moveCube1
+  animation-delay: $wait
+  animation-name: bdCube1
 
 .bd-focus-cube-2
   @extend %bd-focus-animation-cube
-  animation-name: moveCube2
-  animation-delay: $delay
+  animation-name: bdCube2
+  animation-delay: $wait + $delay
 
 .bd-focus-cube-3
   @extend %bd-focus-animation-cube
-  animation-name: moveCube3
-  animation-delay: $delay * 2
+  animation-name: bdCube3
+  animation-delay: $wait + ($delay * 2)
 
-@keyframes bdJellyGrow
+@keyframes fadeIn
+  from
+    opacity: 0
+    transform: scale(0)
+  to
+    opacity: 1
+    transform: scale(1)
+
+.bd-focus-css3
+  @extend %bd-focus-animation
+  animation-delay: $wait * 2
+  animation-duration: $duration
+  animation-name: fadeIn
+
+.bd-focus-github
+  @extend %bd-focus-animation
+  animation-delay: $wait * 3
+  animation-duration: $duration * 3
+  animation-name: bdJellyPop
+
+@keyframes bdJellyPop
   0%
-    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+    opacity: 0
+    transform: matrix3d(0.1, 0, 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)
+    opacity: 1
+    transform: matrix3d(0.384, 0, 0, 0, 0, 0.466, 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)
+    transform: matrix3d(0.505, 0, 0, 0, 0, 0.639, 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)
+    transform: matrix3d(0.693, 0, 0, 0, 0, 0.904, 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)
+    transform: matrix3d(0.895, 0, 0, 0, 0, 1.151, 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)
+    transform: matrix3d(0.947, 0, 0, 0, 0, 1.204, 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)
+    transform: matrix3d(1.111, 0, 0, 0, 0, 1.299, 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)
+    transform: matrix3d(1.127, 0, 0, 0, 0, 1.298, 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)
+    transform: matrix3d(1.187, 0, 0, 0, 0, 1.216, 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)
+    transform: matrix3d(1.191, 0, 0, 0, 0, 1.169, 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)
+    transform: matrix3d(1.177, 0, 0, 0, 0, 1.062, 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)
+    transform: matrix3d(1.135, 0, 0, 0, 0, 0.964, 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)
+    transform: matrix3d(1.121, 0, 0, 0, 0, 0.944, 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)
+    transform: matrix3d(1.057, 0, 0, 0, 0, 0.907, 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)
+    transform: matrix3d(1.043, 0, 0, 0, 0, 0.909, 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)
+    transform: matrix3d(0.981, 0, 0, 0, 0, 0.966, 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)
+    transform: matrix3d(0.974, 0, 0, 0, 0, 0.981, 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)
+    transform: matrix3d(0.965, 0, 0, 0, 0, 1.02, 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)
+    transform: matrix3d(0.969, 0, 0, 0, 0, 1.029, 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)
+    transform: matrix3d(0.992, 0, 0, 0, 0, 1.006, 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)
+    transform: matrix3d(1.005, 0, 0, 0, 0, 0.991, 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)
+    transform: matrix3d(1.007, 0, 0, 0, 0, 0.993, 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)
+    transform: matrix3d(1.001, 0, 0, 0, 0, 1.003, 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)
+    transform: matrix3d(0.999, 0, 0, 0, 0, 1, 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)
+    transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 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)
+    opacity: 1
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)

diff --git a/docs/_sass/index.sass b/docs/_sass/index.sass
index 1308339c3dec3fda158a5e885250cae95b6a4df1..8efe1d87b991401990ac5a6ae4f9875a23710895 100644 (file)
--- a/docs/_sass/index.sass
+++ b/docs/_sass/index.sass
@@ -142,19 +142,53 @@
 .bd-focus-item
   border-radius: $radius-large
   padding-top: 1.25rem
-  transition-duration: $speed * 2
-  transition-property: background-color
+  position: relative
+  .title a,
+  .subtitle
+    transition-duration: $speed * 2
+    transition-property: color
+  .title
+    position: relative
+    transition-duration: $speed * 2
+    transition-property: color
   .subtitle
     color: $grey-light
+    position: relative
     strong
       color: currentColor
-  .title
+  &::before
+    +overlay
+    background-color: $white-bis
+    border-radius: $radius-large
+    content: ""
+    display: block
+    opacity: 0
+    pointer-events: none
+    transform: scale(1.1)
+    transform-origin: center
     transition-duration: $speed * 2
-    transition-property: color
+    transition-property: opacity, transform
   &:hover
-    background-color: $white-bis
+    &::before
+      opacity: 1
+      transform: scale(1)
+    .subtitle
+      color: $text
+  &:nth-child(1):hover
+    .title
+      color: $orange
+  &:nth-child(2):hover
+    .title
+      color: $success
+  &:nth-child(3):hover
     .title
       color: $link
+  &:nth-child(4):hover
+    .title
+      color: $black
+
+.bd-focus-icon
+  position: relative
 
 .bd-focus-mobile
   color: $purple
@@ -172,6 +206,7 @@
   position: relative
   height: 3rem
   margin: 0 auto
+  top: -0.5rem
   width: 3rem
 
 .bd-focus-cube

diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 77aeb2af79d5fd4eb87f5f5cf5ebfc11ac0e6f40..67d0f0b8340f9272d77b8b82d0745ca7c31ec2b6 100644 (file)
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -133,7 +133,7 @@
   width: 1em;
 }
 
-.is-overlay, .image.is-square img, .image.is-1by1 img, .image.is-5by4 img, .image.is-4by3 img, .image.is-3by2 img, .image.is-5by3 img, .image.is-16by9 img, .image.is-2by1 img, .image.is-3by1 img, .image.is-4by5 img, .image.is-3by4 img, .image.is-2by3 img, .image.is-3by5 img, .image.is-9by16 img, .image.is-1by2 img, .image.is-1by3 img, .modal, .modal-background, .hero-video, .bd-category-toggle, .bd-patreon-button:hover::after, #carbonads .carbon-wrap:hover .carbon-img::after, .intro-spinner, .intro-shadow, .bd-structure-item::before, .bd-structure-item::after, .highlight .bd-show, .bd-banner-background, .bd-book-pattern::before,
+.is-overlay, .image.is-square img, .image.is-1by1 img, .image.is-5by4 img, .image.is-4by3 img, .image.is-3by2 img, .image.is-5by3 img, .image.is-16by9 img, .image.is-2by1 img, .image.is-3by1 img, .image.is-4by5 img, .image.is-3by4 img, .image.is-2by3 img, .image.is-3by5 img, .image.is-9by16 img, .image.is-1by2 img, .image.is-1by3 img, .modal, .modal-background, .hero-video, .bd-category-toggle, .bd-patreon-button:hover::after, #carbonads .carbon-wrap:hover .carbon-img::after, .bd-focus-item::before, .intro-spinner, .intro-shadow, .bd-structure-item::before, .bd-structure-item::after, .highlight .bd-show, .bd-banner-background, .bd-book-pattern::before,
 .bd-book-modal-column.bd-is-cover::before, .bd-book-pattern, .bd-book-modal-background {
   bottom: 0;
   left: 0;
@@ -10487,31 +10487,72 @@ svg {
 .bd-focus-item {
   border-radius: 6px;
   padding-top: 1.25rem;
+  position: relative;
+}
+
+.bd-focus-item .title a,
+.bd-focus-item .subtitle {
+  transition-duration: 172ms;
+  transition-property: color;
+}
+
+.bd-focus-item .title {
+  position: relative;
   transition-duration: 172ms;
-  transition-property: background-color;
+  transition-property: color;
 }
 
 .bd-focus-item .subtitle {
   color: #b5b5b5;
+  position: relative;
 }
 
 .bd-focus-item .subtitle strong {
   color: currentColor;
 }
 
-.bd-focus-item .title {
+.bd-focus-item::before {
+  background-color: #fafafa;
+  border-radius: 6px;
+  content: "";
+  display: block;
+  opacity: 0;
+  pointer-events: none;
+  transform: scale(1.1);
+  transform-origin: center;
   transition-duration: 172ms;
-  transition-property: color;
+  transition-property: opacity, transform;
 }
 
-.bd-focus-item:hover {
-  background-color: #fafafa;
+.bd-focus-item:hover::before {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.bd-focus-item:hover .subtitle {
+  color: #4a4a4a;
+}
+
+.bd-focus-item:nth-child(1):hover .title {
+  color: #ff470f;
 }
 
-.bd-focus-item:hover .title {
+.bd-focus-item:nth-child(2):hover .title {
+  color: #23d160;
+}
+
+.bd-focus-item:nth-child(3):hover .title {
   color: #3273dc;
 }
 
+.bd-focus-item:nth-child(4):hover .title {
+  color: #0a0a0a;
+}
+
+.bd-focus-icon {
+  position: relative;
+}
+
 .bd-focus-mobile {
   color: #b86bff;
   margin-right: -20px;
@@ -10531,6 +10572,7 @@ svg {
   position: relative;
   height: 3rem;
   margin: 0 auto;
+  top: -0.5rem;
   width: 3rem;
 }
 
@@ -13105,18 +13147,74 @@ svg {
   }
 }
 
-.bd-focus-mobile,
-.bd-focus-tablet,
-.bd-focus-desktop, .bd-focus-cube-1, .bd-focus-cube-2, .bd-focus-cube-3 {
-  animation-duration: 500ms;
+@keyframes bdSlideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-1rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes bdSlideUp {
+  from {
+    opacity: 0;
+    transform: translateY(1rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.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-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 {
+.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) .subtitle {
+  animation-delay: 125ms;
+}
+
+.bd-focus-item:nth-child(2) .title {
+  animation-delay: 500ms;
+}
+
+.bd-focus-item:nth-child(2) .subtitle {
+  animation-delay: 625ms;
+}
+
+.bd-focus-item:nth-child(3) .title {
+  animation-delay: 1000ms;
+}
+
+.bd-focus-item:nth-child(3) .subtitle {
+  animation-delay: 1125ms;
+}
+
+.bd-focus-item:nth-child(4) .title {
+  animation-delay: 1500ms;
+}
+
+.bd-focus-item:nth-child(4) .subtitle {
+  animation-delay: 1625ms;
+}
+
+.bd-focus-mobile, .bd-focus-tablet, .bd-focus-desktop {
+  animation-duration: 500ms;
   animation-name: bdGrow;
   transform-origin: bottom center;
 }
@@ -13129,7 +13227,7 @@ svg {
   animation-delay: 500ms;
 }
 
-@keyframes moveCube1 {
+@keyframes bdCube1 {
   0% {
     transform: translate3d(0, -50px, 0);
     opacity: 0;
@@ -13140,7 +13238,7 @@ svg {
   }
 }
 
-@keyframes moveCube2 {
+@keyframes bdCube2 {
   0% {
     transform: translate3d(-40px, 30px, 0);
     opacity: 0;
@@ -13151,7 +13249,7 @@ svg {
   }
 }
 
-@keyframes moveCube3 {
+@keyframes bdCube3 {
   0% {
     transform: translate3d(40px, 30px, 0);
     opacity: 0;
@@ -13163,102 +13261,129 @@ svg {
 }
 
 .bd-focus-cube-1, .bd-focus-cube-2, .bd-focus-cube-3 {
-  animation-iteration-count: infinite;
   animation-direction: alternate;
   animation-duration: 2000ms;
+  animation-iteration-count: infinite;
 }
 
 .bd-focus-cube-1 {
-  animation-name: moveCube1;
+  animation-delay: 500ms;
+  animation-name: bdCube1;
 }
 
 .bd-focus-cube-2 {
-  animation-name: moveCube2;
-  animation-delay: 250ms;
+  animation-name: bdCube2;
+  animation-delay: 750ms;
 }
 
 .bd-focus-cube-3 {
-  animation-name: moveCube3;
-  animation-delay: 500ms;
+  animation-name: bdCube3;
+  animation-delay: 1000ms;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.bd-focus-css3 {
+  animation-delay: 1000ms;
+  animation-duration: 500ms;
+  animation-name: fadeIn;
+}
+
+.bd-focus-github {
+  animation-delay: 1500ms;
+  animation-duration: 1500ms;
+  animation-name: bdJellyPop;
 }
 
-@keyframes bdJellyGrow {
+@keyframes bdJellyPop {
   0% {
-    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    opacity: 0;
+    transform: matrix3d(0.1, 0, 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);
+    opacity: 1;
+    transform: matrix3d(0.384, 0, 0, 0, 0, 0.466, 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);
+    transform: matrix3d(0.505, 0, 0, 0, 0, 0.639, 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);
+    transform: matrix3d(0.693, 0, 0, 0, 0, 0.904, 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);
+    transform: matrix3d(0.895, 0, 0, 0, 0, 1.151, 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);
+    transform: matrix3d(0.947, 0, 0, 0, 0, 1.204, 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);
+    transform: matrix3d(1.111, 0, 0, 0, 0, 1.299, 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);
+    transform: matrix3d(1.127, 0, 0, 0, 0, 1.298, 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);
+    transform: matrix3d(1.187, 0, 0, 0, 0, 1.216, 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);
+    transform: matrix3d(1.191, 0, 0, 0, 0, 1.169, 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);
+    transform: matrix3d(1.177, 0, 0, 0, 0, 1.062, 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);
+    transform: matrix3d(1.135, 0, 0, 0, 0, 0.964, 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);
+    transform: matrix3d(1.121, 0, 0, 0, 0, 0.944, 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);
+    transform: matrix3d(1.057, 0, 0, 0, 0, 0.907, 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);
+    transform: matrix3d(1.043, 0, 0, 0, 0, 0.909, 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);
+    transform: matrix3d(0.981, 0, 0, 0, 0, 0.966, 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);
+    transform: matrix3d(0.974, 0, 0, 0, 0, 0.981, 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);
+    transform: matrix3d(0.965, 0, 0, 0, 0, 1.02, 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);
+    transform: matrix3d(0.969, 0, 0, 0, 0, 1.029, 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);
+    transform: matrix3d(0.992, 0, 0, 0, 0, 1.006, 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);
+    transform: matrix3d(1.005, 0, 0, 0, 0, 0.991, 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);
+    transform: matrix3d(1.007, 0, 0, 0, 0, 0.993, 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);
+    transform: matrix3d(1.001, 0, 0, 0, 0, 1.003, 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);
+    transform: matrix3d(0.999, 0, 0, 0, 0, 1, 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);
+    transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 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);
+    opacity: 1;
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
   }
 }