Squash & Stretch Ball

<!-- Squash & Stretch Ball -->
<div class="nuda-ms2-squash-ball" role="img" aria-label="Bouncing ball animation">
  <span class="nuda-ms2-squash-ball__shadow" aria-hidden="true"></span>
  <span class="nuda-ms2-squash-ball__ball" aria-hidden="true"></span>
</div>

.nuda-ms2-squash-ball {
  position: relative;
  width: 110px;
  height: 130px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 14px;
}

.nuda-ms2-squash-ball__ball {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg,#e4ff54,#a3b830);
  animation: _nuda-ms2SquashBall 1.1s cubic-bezier(.5,0,.5,1) infinite;
  will-change: transform;
}

.nuda-ms2-squash-ball__shadow {
  position: absolute;
  bottom: 12px;
  width: 40px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  filter: blur(1px);
  animation: _nuda-ms2SquashShadow 1.1s cubic-bezier(.5,0,.5,1) infinite;
  will-change: transform,opacity;
}

@keyframes _nuda-ms2SquashBall {
  0% {
    transform: translateY(-56px) scale(.85,1.2);
  }
  45% {
    transform: translateY(0) scale(1.35,.65);
  }
  55% {
    transform: translateY(0) scale(1.35,.65);
  }
  100% {
    transform: translateY(-56px) scale(.85,1.2);
  }
}

@keyframes _nuda-ms2SquashShadow {
  0% {
    transform: scale(.6);
    opacity: .2;
  }
  45% {
    transform: scale(1.2);
    opacity: .5;
  }
  55% {
    transform: scale(1.2);
    opacity: .5;
  }
  100% {
    transform: scale(.6);
    opacity: .2;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-ms2-squash-ball__ball,.nuda-ms2-squash-ball__shadow {
    animation: none;
  }
  .nuda-ms2-squash-ball__ball {
    transform: translateY(-56px) scale(1,1);
  }
  .nuda-ms2-squash-ball__shadow {
    transform: scale(.6);
    opacity: .2;
  }
}