<div class="floor">
  <div class="ball">
    <svg viewBox="0 0 496 512" width="100" title="basketball-ball">
  <path d="M212.3 10.3c-43.8 6.3-86.2 24.1-122.2 53.8l77.4 77.4c27.8-35.8 43.3-81.2 44.8-131.2zM248 222L405.9 64.1c-42.4-35-93.6-53.5-145.5-56.1-1.2 63.9-21.5 122.3-58.7 167.7L248 222zM56.1 98.1c-29.7 36-47.5 78.4-53.8 122.2 50-1.5 95.5-17 131.2-44.8L56.1 98.1zm272.2 204.2c45.3-37.1 103.7-57.4 167.7-58.7-2.6-51.9-21.1-103.1-56.1-145.5L282 256l46.3 46.3zM248 290L90.1 447.9c42.4 34.9 93.6 53.5 145.5 56.1 1.3-64 21.6-122.4 58.7-167.7L248 290zm191.9 123.9c29.7-36 47.5-78.4 53.8-122.2-50.1 1.6-95.5 17.1-131.2 44.8l77.4 77.4zM167.7 209.7C122.3 246.9 63.9 267.3 0 268.4c2.6 51.9 21.1 103.1 56.1 145.5L214 256l-46.3-46.3zm116 292c43.8-6.3 86.2-24.1 122.2-53.8l-77.4-77.4c-27.7 35.7-43.2 81.2-44.8 131.2z" />
</svg>
  </div>
</div>

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.ball {
  height: 25vmin;
  width: 25vmin;
  background: hsl(30 80% 30%);
  border-radius: 50%;
  animation: drop 2s infinite var(--ease);
}

@keyframes drop {
  0%, 50% {
    translate: 0 -300%;
  }
  50%, 100% {
    translate: 0 0;
  }
}

.floor {
  position: relative;
}

.floor::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 80%;
  height: 10%;
  background: radial-gradient(hsl(0 0% 10% / 0.5), hsl(0 0% 10% / 0.1));
  border-radius: 50%;
  z-index: -1;
  left: 50%;
  translate: -50% 50%;
  animation: show 2s infinite var(--ease);
}

svg {
  height: 100%;
  width: 100%;
  fill: hsl(30 100% 50%);
}

@keyframes show {
  0%, 50% {
    opacity: 0;
    scale: 0;
  }
  50%, 100% {
    opacity: 1;
    scale: 1;
  }
}

:root {
  --bounce-easing: linear(
    0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141 13.6%, 0.25, 0.391, 0.563, 0.765,
    1, 0.891 40.9%, 0.848, 0.813, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785,
    0.813, 0.848, 0.891 68.2%, 1 72.7%, 0.973, 0.953, 0.941, 0.938, 0.941, 0.953,
    0.973, 1, 0.988, 0.984, 0.988, 1
  );
}

:root {
  --ease: ease-in-out;
}

@supports(animation-timing-function: linear(0, 1)) {
  :root {
    --ease: var(--bounce-easing);
  }
}