プログラミングの独学サイトです。

CSS

CSSアニメーションの作り方｜transition・animation・keyframesとサンプル集

CSSアニメーションの作り方を、transition、animation、@keyframesの違いから解説します。フェードイン、ふわっと表示、ゆらゆら、ボタン、ローディングなど、コピペしやすいサンプルと注意点をまとめます。

更新 2026.07.12公開 2020.12.24 10分で読めます
この記事の目次
  1. CSSアニメーションの基本
  2. transitionの使い方
  3. animationと@keyframesの使い方
  4. CSSアニメーションの基本プロパティ
  5. フェードインアニメーション
  6. ゆらゆら動くアニメーション
  7. ローディングアニメーション
  8. カードをふわっと浮かせるアニメーション
  9. おしゃれに見せるコツ
  10. CSSアニメーションが効かないときの確認ポイント
  11. 動きを減らす設定に対応する
  12. CSSアニメーションサンプル集
  13. ふわっと表示
  14. 下から表示
  15. 拡大して表示
  16. 点滅
  17. まとめ
  18. 関連記事
  19. 参考リンク

CSSアニメーションは、要素をふわっと表示したり、ホバー時に色や大きさを変えたり、ローディングの動きを作ったりするときに使います。

CSSだけでも、フェードイン、スライド、ゆらゆら、回転、ボタンの動きなどを作れます。

この記事では、CSSアニメーションの基本から、コピペしやすいサンプルまでまとめて解説します。

  • transition と animation の違い
  • @keyframes の使い方
  • フェードイン、ふわっと表示、ゆらゆら、回転のサンプル
  • ボタンやカードに使えるおしゃれな動き
  • CSSアニメーションが効かないときの確認ポイント
  • 動きを減らしたいユーザーへの配慮

CSSアニメーションの基本

CSSで動きを作る方法は、大きく分けると2つあります。

方法 特徴 向いている場面
transition 状態が変わるときに、なめらかに変化させる ホバー、フォーカス、開閉など
animation @keyframes で時間ごとの動きを作る 自動で動かす、繰り返す、複雑な動き

ホバーしたときだけ動かしたいなら transition、ページを開いたときに自動で動かしたいなら animation が向いています。

スポンサーリンク

transitionの使い方

transition は、通常時と変化後の状態をなめらかにつなぎます。

ボタンのホバーアニメーションを作ってみます。

<a href="#" class="button">詳しく見る</a>
.button {
  display: inline-block;
  padding: 12px 24px;
  color: #fff;
  background: #0066cc;
  border-radius: 4px;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.button:hover {
  background: #004999;
  transform: translateY(-2px);
}

transition は、変化させたいプロパティ、時間、動きの速さを指定します。

transition: プロパティ 時間 イージング;

animationと@keyframesの使い方

animation は、@keyframes で作った動きを要素に適用します。

フェードインの例です。

.fade-in {
  animation: fadeIn 0.8s ease forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

forwards を付けると、アニメーション終了後も最後の状態を維持できます。

CSSアニメーションの基本プロパティ

animation でよく使うプロパティを整理します。

プロパティ 意味
animation-name 使う @keyframes の名前
animation-duration 1回の再生時間
animation-timing-function 動きの速さの変化
animation-delay 開始までの遅延時間
animation-iteration-count 繰り返し回数。無限は infinite
animation-direction 再生方向。往復には alternate
animation-fill-mode 開始前や終了後の状態

まとめて書く場合は、次のようにします。

.box {
  animation: fadeIn 0.8s ease 0.2s forwards;
}

フェードインアニメーション

ページ読み込み時にふわっと表示したい場合は、opacity と transform を組み合わせると自然です。

.fade-up {
  opacity: 0;
  animation: fadeUp 0.8s ease forwards;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

ただ透明度だけを変えるより、少し下から上がる動きを入れると見た目が自然になります。

ゆらゆら動くアニメーション

アイコンや装飾をゆらゆら動かしたい場合は、rotate を使います。

.swing {
  display: inline-block;
  animation: swing 2.4s ease-in-out infinite;
}

@keyframes swing {
  0% {
    transform: rotate(-4deg);
  }

  50% {
    transform: rotate(4deg);
  }

  100% {
    transform: rotate(-4deg);
  }
}

強すぎる動きは読みづらくなるので、角度は小さめがおすすめです。

ローディングアニメーション

回転するローディングは、border と transform: rotate() で作れます。

<span class="loader"></span>
.loader {
  display: inline-block;
  width: 32px;
  height: 32px;
  border: 4px solid #ddd;
  border-top-color: #0066cc;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

linear を使うと一定の速度で回転します。

カードをふわっと浮かせるアニメーション

カードやリンクのホバーには、transition が向いています。

.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

ホバー時の動きは、短く控えめにすると使いやすいです。

おしゃれに見せるコツ

CSSアニメーションをおしゃれに見せるには、派手に動かすよりも、目的を絞ることが大切です。

  • 移動距離を小さくする
  • 時間は 0.2s から 0.8s くらいを目安にする
  • ease や ease-out で自然にする
  • 常に動き続ける装飾を増やしすぎない
  • 重要な操作を邪魔しない

多くの場合、opacity と transform を中心に作ると、見た目もパフォーマンスも安定しやすいです。

CSSアニメーションが効かないときの確認ポイント

アニメーションが動かないときは、次の点を確認します。

  1. animation-name と @keyframes の名前が一致しているか
  2. animation-duration が 0s になっていないか
  3. 変化前と変化後の値が同じではないか
  4. CSSの詳細度や読み込み順で上書きされていないか
  5. display: none; の要素に見た目の変化を期待していないか
  6. ブラウザの検証ツールでCSSが打ち消されていないか

CSSの優先順位で負けている場合は、CSS詳細度の記事 も参考にしてください。

動きを減らす設定に対応する

ユーザーによっては、画面の動きが苦手な場合があります。

CSSでは、prefers-reduced-motion を使って、動きを減らす設定に対応できます。

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

すべてのアニメーションを完全に消すのではなく、必要に応じて短くする、動きの大きい表現をやめる、という考え方でもよいです。

CSSアニメーションサンプル集

最後に、よく使うサンプルをまとめます。

ふわっと表示

.fade {
  animation: fade 0.6s ease forwards;
}

@keyframes fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

下から表示

.slide-up {
  animation: slideUp 0.7s ease forwards;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

拡大して表示

.zoom-in {
  animation: zoomIn 0.5s ease forwards;
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.94);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

点滅

.blink {
  animation: blink 1s ease-in-out infinite;
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.35;
  }
}

点滅は目立ちますが、読みづらくなりやすいので注意して使います。

まとめ

CSSアニメーションは、transition と animation の違いを理解すると使いやすくなります。

この記事のポイントをまとめます。

  • ホバーなど状態変化には transition が向いている
  • 自動再生や繰り返しには animation と @keyframes を使う
  • フェードインやスライドは opacity と transform が扱いやすい
  • 動きは控えめにすると自然で使いやすい
  • prefers-reduced-motion で動きを減らす設定にも配慮する

文字の流れるアニメーションや一文字ずつ表示するサンプルは、CSS文字アニメーションのサンプル集 で解説しています。

関連記事

参考リンク

スポンサーリンク

RELATED

あわせて読みたい記事