blog ブログ

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

2024.11.12

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

WEB

sochan

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

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

2024-10-28

【初心者向け】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 ]
タイムラインに沿ったアニメーションの適用範囲の開始と終わりを設定 [ animation-range ]

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

SafariやFirefoxなど、対応していないブラウザがありますので、
事前に確認することをおすすめします。
対応していないブラウザの場合、アニメーションが機能せず、静的な表示のみとなります。

caniuse.com

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

■上に伸びるよ↓


.square01 {
  animation: square01 linear; 
  animation-timeline: view();
  /* 以下装飾 */
  width: 100%;
  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;
  }
}

■360°回転するよ↓


  .rotate{
  animation: rotate linear; 
  animation-timeline: view();
  /* 以下装飾 */
  background-image: linear-gradient(90deg, rgba(247, 93, 139, 1), rgba(254, 220, 64, 1));
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

  @keyframes rotate {
  0%  {
    transform:rotate(0deg);
  }
  100% {
    transform:rotate(360deg);
  }
}

■ゆらゆらするよ↓


.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: 100%;
  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;
  }
}

まとめ

Javascriptを使わずにスクロール量に応じてアニメーションを
発生させることができるCSSの一例をご紹介しました。
思ったよりも簡単に出来て、表現の幅も更に広がるのではないでしょうか！

日の出医療福祉グループクリエイティブ室では医療・介護・保育を始めとする医療福祉業界の様々な制作をおこなっています。
気になった方はお気軽にお問い合わせからご相談ください。

お問い合わせはこちら