bulma/docs/_sass/focus.sass

@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)