blog ブログ

TOP ＞ blog ＞ WEB ＞【初心者向け】CSSスクロールに合わせたアニメーションを作ろう

2024.11.12

【初心者向け】CSSスクロールに合わせたアニメーションを作ろう

WEB

sochan

こんにちは、デザイナーのsochanです。
今回はスクロールするとそれに合わせてアニメーションするCSSを実装しよう！です。

基本設定などは「CSSで簡単なアニメーションを作ろう」が元になっていますのでこちらも参考にどうぞ！

@keyframesとanimationで呼び出す

前回の記事と同じく、keyframesとanimationの設定で動きをつけることができます。


/* keyframes */
@keyframes [アニメーション名（なんでもよい）] {
    0% {
        [プロパティ]: [値];
    }
    100% {
        [プロパティ]: [値];
    }
}

/* アニメーションプロパティ */
アニメーション名（なんでもよい） [ animation-name ]
開始〜終了までの時間 [ animation-duration ]
動き方 [ animation-timing-function ] ※ease-in ease-out など
開始までの時間 [ animation-delay ]
繰り返す回数 [ animation-iteration-count ]
終了後に逆再生・反転するか [ animation-direction ]
再生前後にスタイルを適用するか [ animation-fill-mode ]
/* 今回使用するプロパティ */
animation-timeline: scroll();
animation-timeline: view();

対応しているブラウザを確認

SafariやFirefoxなど対応していないブラウザもありますので、
一度確認することをおすすめします。
対応していなブラウザの場合、動きは無しのまま表示だけされます。

caniuse.com

スクロールで連動するアニメーション

■上に伸びるよ↓


.square01 {
  animation: square01 linear; 
  animation-timeline: view();
  /* 以下装飾 */
  width: 200px;
  height: 200px;
  background: #FFCA36;
  transform-origin: bottom; 
}

@keyframes square01 {
  0% {
    scale: 1 0;
  }
  100% {
    scale: 1 1;
  }
}

■横に伸びるよ↓


.square02 {
  animation: square02 linear; 
  animation-timeline: view();
  /* 以下装飾 */
  width: 100%;
  height: 200px;
  background: #FFCA36;
  transform-origin: left; 
}

@keyframes square02 {
  0% {
    scale: 1 0;
  }
  100% {
    scale: 1 1;
  }
}

■ゆらゆらするよ↓


.yurayura {
  animation: yurayura linear; 
  animation-timeline: view();
  /* 以下装飾 */
  width: 200px;
  height: 200px;
  background: #FFCA36;
}

@keyframes yurayura {
  0% ,100% {
    transform:rotate(10deg);
  }
  50% {
    transform:rotate(-10deg);
  }
}

■色が変わるよ↓


.color {
  animation: color linear; 
  animation-timeline: view();
  /* 以下装飾 */
  width: 200px;
  height: 200px;
}

@keyframes color {
  0%  {
    background-color:#FFA439;
  }
  100% {
    background-color:#F78DA7;
  }
}

■フェードインするよ↓


.fadeIn {
  width: 100%;
  height: auto;
  animation: fadeIn linear both;
  animation-timeline: view();
  animation-range: entry 25% cover 50%;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    clip-path: inset(45% 20% 45% 20%);
  }

  to {
    opacity: 1;
    clip-path: inset(0% 0% 0% 0%);
  }
}

■パララックス↓

テキストです


  .parallax__box {
  background-image: url(sample.jpg);
  background-size: cover;
  background-position: top;
  animation: parallax linear both;
  animation-timeline: view();
}

@keyframes parallax {
  0% {
    background-position: center 0;
  }

  100% {
    background-position: center -200px;
  }
}

■横にスクロールするよ↓