CSSのScroll-driven Animation

スクロールでフェード・インするSample


概要
- CSSの `Scroll-driven Animation` を使うことで、JavaScriptを使わずにスクロールをトリガーにしたアニメーションの実装が可能 - 2025/03/19現在、対応ブラウザはChromeとEdgeで、SafariとFirefoxは未対応 - `animation-timeline: view();` - 要素の可視性に基づいたタイムラインを設定 - `animation-range: entry 25% cover 70%;` - 要素が25%表示されたらアニメーション開始、70%表示されたら完了

デモ
この要素は、スクロールして画面に表示されると、フェードインしながら現れます。
Scroll-driven Animationを使うと、JavaScript不要で実装できます。
animation-timelineとanimation-rangeプロパティを使って、 スクロール位置に基づいたアニメーションが可能です。
このデモでは、要素が視界に25%入ったときにアニメーションが開始され、 70%表示されたときに完了します。
モダンブラウザでサポートされている新しい機能です。

コード

CSS

 
/* スクロールすることでフェード・インさせる要素 */
.fade-in-element {
  font-size: 1.5rem;
  padding: 2rem;
  margin: 2rem 0;
  background-color: #e9f7fe;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  
  /* 初期状態は透明 */
  opacity: 0;
  
  /* アニメーションの設定 */
  animation-timeline: view();
  animation-name: fade-in;
  
  /* 要素が25%表示されたらアニメーション開始 */
  animation-range: entry 25% cover 70%;
  
  /* アニメーションの他のプロパティ */
  animation-fill-mode: both;
  animation-duration: 1s;
}

/* フェードインアニメーションの定義 */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* スクロールを促すスタイル */
.scroll-down {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-size: 0.9rem;
  color: #666;
}

HTML

 
<div class="fade-in-element">
  この要素は、スクロールして画面に表示されると、フェードインしながら現れます。
</div>

<div class="fade-in-element">
  Scroll-driven Animationを使うと、JavaScript不要で実装できます。
</div>

<div class="fade-in-element">
  animation-timelineとanimation-rangeプロパティを使って、
  スクロール位置に基づいたアニメーションが可能です。
</div>

<div class="fade-in-element">
  このデモでは、要素が視界に25%入ったときにアニメーションが開始され、
  70%表示されたときに完了します。
</div>

<div class="fade-in-element">
  モダンブラウザでサポートされている新しい機能です。
</div>

参照