スクロールし画面内に入ったブロックをアニメーション表示する方法

参考：スクロールで表示するアニメーションをJSなしのCSSだけで実装する方法

「スクロールで要素が画面内に入ったらアニメーションさせる」には、これまでJavaScriptを用い、画面内にターゲットが入ったか監視するのが定番でした。

これがCSSのtimeline-triggerとanimation-triggerで実現可能となります。

"animation-trigger" | Can I use... Support tables for HTML5, CSS3, etc

"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile w...

caniuse.com

完成イメージ

すし

target my-left

ざん

target my-center

まい

target my-right

実装手順

以下のコードをstyle.cssに追加します。

.target {
  /*
    発火条件（JSのIntersectionObserver相当）
    view()     : 要素が画面内に見えているかを基準にする
    entry 20%  : 20%入った時点で発火（旧 threshold: 0.2 相当）
    cover 100% : 範囲の終点。これでリロード時に既に画面内・通過済みの要素も発火する
  */
  timeline-trigger: --fade view() entry 20% cover 100%;
}

.my-left,
.my-center,
.my-right {
  opacity: 0;
  transform: translateY(100px);

  animation: fadeInUp 1.8s forwards;

  /*
    play-once : 発火後は1回だけ再生（observer.unobserve() 相当）
  */
  animation-trigger: --fade play-once;
}

.my-center { animation-delay: 500ms; }
.my-right  { animation-delay: 1000ms; }

@keyframes fadeInUp {
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}