CSS アニメーショントリガー

<section>
  <div>
    <p>下にスクロール</p>
    <p id="trigger">バウンサー</p>
    <p>スクロールを続ける</p>
    <p>スクロールを続ける</p>
    <p>スクロールを続ける</p>
    <p id="trigger2">もう一つのバウンサー</p>
    <p>上にスクロール</p>
  </div>
</section>

<span id="ball"><span></span></span>

#ball,
#ball span {
  animation:
    move-right 2s 1 ease-out both,
    move-right 2s 1 ease-out forwards;
  animation-trigger:
    --t play-forwards play-backwards,
    --t2 play-forwards play-backwards;
}
#ball span {
  animation-name: bounce, bounce;
}

#trigger {
  timeline-trigger-name: --t;
  timeline-trigger-source: view();
}
#trigger2 {
  timeline-trigger-name: --t2;
  timeline-trigger-source: view();
}

html {
  font-family: sans-serif;
  font-size: 1.3rem;
}

* {
  box-sizing: border-box;
}

@layer scroller {
  section {
    border: solid;
    width: 200px;
    height: 250px;
    margin-top: 50px;
    overflow: scroll;
  }
  p {
    text-align: center;
    font-size: 1.5rem;
    margin: 100% 0;
  }
  #trigger,
  #trigger2 {
    padding: 0;
    color: red;
  }
}

@layer animation-setup {
  #ball {
    position: fixed;
    top: 96vh;
  }
  #ball span {
    background: red;
    border-radius: 50%;
    height: 5vw;
    display: block;
    aspect-ratio: 1/1;
  }

  @keyframes move-right {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(90vw);
    }
  }

  @keyframes bounce {
    9%,
    24%,
    35%,
    44%,
    51%,
    58%,
    63%,
    68%,
    72%,
    76%,
    100% {
      transform: translateY(0);
      animation-timing-function: ease-out;
    }
    0%,
    17%,
    30%,
    40%,
    48%,
    55%,
    61%,
    66%,
    70%,
    74% {
      animation-timing-function: ease-in;
    }
    0% {
      transform: translateY(-96vh);
    }
    17% {
      transform: translateY(-57.6vh);
    }
    30% {
      transform: translateY(-34.56vh);
    }
    40% {
      transform: translateY(-20.74vh);
    }
    48% {
      transform: translateY(-12.44vh);
    }
    55% {
      transform: translateY(-7.46vh);
    }
    61% {
      transform: translateY(-4.48vh);
    }
    66% {
      transform: translateY(-2.69vh);
    }
    70% {
      transform: translateY(-1.61vh);
    }
    74% {
      transform: translateY(-0.97vh);
    }
  }
}

@supports not (timeline-trigger-source: view()) {
  body::before {
    content: "このブラウザーは、スクロールトリガーアニメーションに対応していません。";
    background-color: wheat;
    text-align: center;
    padding: 1rem 0;

    z-index: 1;
    position: fixed;
    inset: 40% 0 auto;
  }
}