【コピペOK】Scroll-Driven Animationsで作れるスクロールアニメーションまとめ

近年登場したCSSの新機能 Scroll-Driven Animations（スクロール駆動アニメーション） によって、JavaScriptを使わずにスクロールに連動した多彩なアニメーションが可能になりました。

この記事では、Scroll-Driven Animationsで実現できる代表的なアニメーション例を紹介します。

各コードはコピペOKなので、自由にカスタマイズして使っていただければ幸いです。

1. プログレスバー（スクロール進捗に応じて進捗度が変わる）

ページの読み進め具合を可視化する横長のプログレスバーです。スクロール位置に応じてバーが伸び縮みします。

See the Pen Untitled by STELLAR INTER (@STELLAR-INTER) on CodePen.

.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw; height: 12px;
  background: darkorange;
  transform-origin: left top; /* どこからバーを伸ばすか設定 */
  animation: progress linear;
  animation-timeline: scroll(); /* 何を起点に動かすか */
}
@keyframes progress {
  from { scale: 0 1; } /* 0 1 = 横に伸びる | 1 0 = 縦に伸びる */
  to   { scale: 1 1; } /* スクロールに応じてサイズ変更 (1 1 = 変更なし) */
}

.box {
  width: 240px; aspect-ratio: 1;
  margin: 6em auto;
  background: gray;
}

2. 要素の回転アニメーション（画面に入ると回転）

ある要素がビューポート内に入ったら回転を始め、出ると戻るアニメーション。

See the Pen Untitled by STELLAR INTER (@STELLAR-INTER) on CodePen.

.rotate {
  width: 150px; aspect-ratio:1;
  background: gray;
  margin: 100vh auto;
  animation: rotateAnim both;
  animation-timeline: view(); /* 何を起点に動かすか (view = ビューポートに入ったら) */
  animation-range: cover 0% cover 80%; /* アニメーション開始地点と終了地点 */
}

@keyframes rotateAnim {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

3. スクロール連動のフェードイン・アウト

スクロールに応じて透明度が変化し、要素が自然にフェードイン/アウトします。

See the Pen Untitled by STELLAR INTER (@STELLAR-INTER) on CodePen.

body, html {
  margin: 0;
  padding: 0;
  height: 200vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fade {
  font-size: 2rem;
  opacity: 0; /* 初期状態は非表示 */
  animation: fadeAnim linear forwards;
  animation-timeline: scroll(); /* 何を起点に動かすか */
  animation-range: contain 0% contain 80%; /* アニメーション開始地点と終了地点 */
}

@keyframes fadeAnim {
  from {
    opacity: 0; /* 開始時は透明 */
  }
  to {
    opacity: 1; /* 終了時に完全に表示 */
  }
}

4. 要素の拡大縮小アニメーション

スクロールに合わせて要素が拡大・縮小し、動きにメリハリをつけられます。

See the Pen Untitled by STELLAR INTER (@STELLAR-INTER) on CodePen.

body, html {
  margin: 0;
  padding: 0;
  height: 250vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.scale {
  width: 200px;
  aspect-ratio:1;
  background: gray;
  margin-top: 150vh;
  animation: scaleAnim linear both;
  animation-timeline: scroll(); /* 何を起点に動かすか */
  animation-range: cover 0% cover 80%; /* アニメーション開始地点と終了地点 */
}

@keyframes scaleAnim {
  from { transform: scale(0.1); } /* 開始前のサイズ */
  to { transform: scale(1.7); } /* 終了後のサイズ */
}

5. 背景色の切り替え

スクロールに応じて背景色を変化させることも可能です。

See the Pen Untitled by STELLAR INTER (@STELLAR-INTER) on CodePen.

body, html {
  margin: 0;
  padding: 0;
  height: 200vh;
}

.bg-gradient {
  height: 400vh;
  animation: bgChange linear forwards;
  animation-timeline: scroll(); /* 何を起点に動かすか */
  animation-range:0% 100%; /* アニメーション開始地点と終了地点 */
}

@keyframes bgChange {
  from { background: linear-gradient(45deg, #ff9a9e, #fad0c4); } /* デフォルトの色 */
  to { background: linear-gradient(45deg, #a18cd1, #fbc2eb); } /* 切り替え後の色 */
}

6. 複数プロパティの同時アニメーション

スクロールに連動して、位置・色・透明度・回転を同時に変化させる複合アニメーションも可能です。

See the Pen Untitled by STELLAR INTER (@STELLAR-INTER) on CodePen.

body, html {
  margin: 0;
  padding: 0;
  height: 300vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.complex {
  width: 150px;
  aspect-ratio:1;
  background: #e91e63;
  margin-top: 200vh;
  animation: complexAnim linear both;
  animation-timeline: scroll();
  animation-range: cover 10% cover 90%;
}

@keyframes complexAnim {
  0% {
    transform: translateX(0) rotate(0deg);
    opacity: 0.5;
    background-color: #e91e63;
  }
  50% {
    transform: translateX(150px) rotate(180deg);
    opacity: 1;
    background-color: #673ab7;
  }
  100% {
    transform: translateX(0) rotate(360deg);
    opacity: 0.5;
    background-color: #e91e63;
  }
}

注意事項

これらは最新のCSS Scroll-Driven Animations仕様を使っています。

Chrome 115以上、Edge 115以上、Safari 16.4+（β含む）など一部ブラウザでのみ対応しています。

それ以前のブラウザでは無視されますので、動作確認時は対応ブラウザでお願いします。