JavaScript不要！滑らかに動くCSSアニメーション集

Posted at 2025-11-07

1. ふわっと現れるフェードイン効果

ページ読み込み時や要素が表示される際に、自然に現れるアニメーションです。ユーザーの注意を引きつつ、柔らかい印象を与えます。

右下のRerunを押して、何回でも動作を見れます。

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

実装コード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>フェードインアニメーション</title>
  <style>
    .fade-in {
      animation: fadeIn 1.5s ease-in;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* デモ用のスタイル */
    .box {
      width: 300px;
      padding: 40px;
      margin: 50px auto;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      border-radius: 10px;
      text-align: center;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <div class="box fade-in">
    ふわっと現れます
  </div>
</body>
</html>

解説

opacityで透明度を変化させ、transform: translateY()で上方向から移動
ease-inを使うことで、滑らかな加速感を実現
アニメーション時間は1.5sに設定（好みに応じて調整可能）

応用例

カードコンポーネントの表示
モーダルウィンドウの出現
セクション見出しの強調

2. ホバー時に浮き上がるカード

マウスカーソルを乗せると、カードが浮き上がって影が濃くなるアニメーションです。クリック可能な要素であることを直感的に伝えられます。

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

実装コード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ホバーカードアニメーション</title>
  <style>
    .hover-card {
      width: 280px;
      padding: 30px;
      margin: 50px auto;
      background: white;
      border-radius: 12px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      cursor: pointer;
    }

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

    /* デモ用のスタイル */
    body {
      background: #f5f5f5;
      font-family: sans-serif;
    }

    .hover-card h3 {
      margin: 0 0 10px 0;
      color: #333;
    }

    .hover-card p {
      margin: 0;
      color: #666;
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <div class="hover-card">
    <h3>カードタイトル</h3>
    <p>マウスを乗せると浮き上がります</p>
  </div>
</body>
</html>

解説

transitionプロパティで、すべての変化を0.3秒かけて滑らかに実行
cubic-bezier(0.4, 0, 0.2, 1)で自然な加減速を実現
transform: translateY(-8px)で上方向に移動
box-shadowの変化で立体感を演出

応用例

商品カードのインタラクション
ブログ記事一覧のサムネイル
ボタンやリンクの強調表示

3. テキストが1文字ずつ現れるタイプライター効果

タイプライターで打っているように、文字が順番に表示されるアニメーションです。キャッチコピーや見出しに使うと印象的です。

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

実装コード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>タイプライターアニメーション</title>
  <style>
    .typewriter {
      font-family: monospace;
      font-size: 1.55vw;
      color: #333;
      border-right: 3px solid #333;
      white-space: nowrap;
      overflow: hidden;
      width: 0;
      animation: typing 2s steps(25) 1s forwards,
                 blink 0.75s step-end infinite;
    }

    @keyframes typing {
      from {
        width: 0;
      }
      to {
        width: 26%;
      }
    }

    @keyframes blink {
      50% {
        border-color: transparent;
      }
    }

    /* デモ用のスタイル */
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background: #f0f0f0;
      margin: 0;
    }
  </style>
</head>
<body>
  <div class="typewriter">
    Hello, World! ようこそCSSの世界へ
  </div>
</body>
</html>

解説

steps(25)で文字が段階的に表示される効果を実現
border-rightでカーソルを再現
blinkアニメーションでカーソルの点滅を表現
white-space: nowrapとoverflow: hiddenで途中の文字を隠す

補足

長い文章の場合は、steps()の数値を文字数に合わせて調整してください。日本語の場合、全角文字は1文字として扱われます。

4. 無限に回転するローディングスピナー

データの読み込み中などに使える、シンプルなスピナーアニメーションです。SVGやアイコンなしで実装できます。

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

実装コード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ローディングスピナー</title>
  <style>
    .spinner {
      width: 60px;
      height: 60px;
      border: 6px solid #f3f3f3;
      border-top: 6px solid #3498db;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

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

    /* デモ用のスタイル */
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background: #ecf0f1;
      margin: 0;
    }
  </style>
</head>
<body>
  <div class="spinner"></div>
</body>
</html>

解説

border-radius: 50%で円形を作成
border-topだけ色を変えることで回転が視覚的にわかる
linearを使うことで等速回転を実現
infiniteで無限ループ

カスタマイズ例

複数の円を組み合わせて、より複雑なローディングアニメーションも作れます。

.spinner-complex {
  width: 60px;
  height: 60px;
  border: 6px solid transparent;
  border-top: 6px solid #3498db;
  border-bottom: 6px solid #e74c3c;
  border-radius: 50%;
  animation: spin 1.2s ease-in-out infinite;
}

ローディングアニメーション系については下記記事で多く取り扱っているので、よろしければこちらも合わせてご参照ください。

5. グラデーションが流れる背景

背景のグラデーションがゆっくりと動き続けるアニメーションです。近未来的でスタイリッシュな印象を与えます。

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

実装コード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>グラデーションアニメーション</title>
  <style>
    .gradient-bg {
      width: 100%;
      height: 400px;
      background: linear-gradient(45deg, 
        #ff6b6b, 
        #4ecdc4, 
        #45b7d1, 
        #96ceb4, 
        #ff6b6b);
      background-size: 400% 400%;
      animation: gradientShift 15s ease infinite;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    @keyframes gradientShift {
      0% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0% 50%;
      }
    }

    /* デモ用のスタイル */
    body {
      margin: 0;
      font-family: sans-serif;
    }

    .content {
      color: white;
      text-align: center;
      font-size: 32px;
      font-weight: bold;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    }
  </style>
</head>
<body>
  <div class="gradient-bg">
    <div class="content">美しいグラデーション</div>
  </div>
</body>
</html>

解説

background-size: 400% 400%で背景を拡大し、移動の余地を作る
background-positionを変化させることでグラデーションが流れる
アニメーション時間を長めに設定（15秒）することで、ゆったりとした動きを実現

パフォーマンスの注意点

グラデーションアニメーションは計算負荷がやや高いため、ページ全体に使うのではなく、ヒーローセクションなど限定的な範囲での使用をおすすめします。

応用例

ヒーローセクションの背景
カードの背景装飾
ボタンのホバーエフェクト

6. バウンドしながら表示される要素

2025年のCSSでは、linear()関数を使って自然なバウンス効果を実現できます。弾むような動きで、楽しくポップな印象を与えます。

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

実装コード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>バウンスアニメーション</title>
  <style>
    .bounce {
      animation: bounceIn 0.8s ease-out;
    }

    @keyframes bounceIn {
      0% {
        transform: scale(0) translateY(-50px);
        opacity: 0;
      }
      50% {
        transform: scale(1.08) translateY(0);
        opacity: 1;
      }
      70% {
        transform: scale(0.9) translateY(-10px);
      }
      85% {
        transform: scale(1.03) translateY(0);
      }
      100% {
        transform: scale(1) translateY(0);
        opacity: 1;
      }
    }

    /* デモ用のスタイル */
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      margin: 0;
    }

    .notification {
      background: white;
      padding: 30px 40px;
      border-radius: 12px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
      text-align: center;
    }

    .notification h2 {
      margin: 0 0 10px 0;
      color: #333;
      font-size: 24px;
    }

    .notification p {
      margin: 0;
      color: #666;
    }
  </style>
</head>
<body>
  <div class="notification bounce">
    <h2>成功しました！</h2>
    <p>操作が完了しました</p>
  </div>
</body>
</html>

解説

複数のキーフレームで段階的に縮小・拡大を繰り返す
scale()とtranslateY()を組み合わせて立体的な動きを表現
最初は小さく透明、徐々に大きくなり、最後に安定

より自然なバウンス効果（最新CSS）

2025年では、linear()関数を使ってより物理的に正確なバウンスを実現できます。

.bounce-modern {
  animation: bounceIn 1s linear(
    0, 0.004, 0.016, 0.035, 0.063 9.1%, 0.141, 0.25, 0.391, 0.563, 
    0.765, 1 36.4%, 0.891 40.9%, 0.848, 0.813, 0.785, 0.766, 0.754, 
    0.75 63.6%, 0.754, 0.766, 0.785, 0.813, 0.848, 0.891 81.8%, 
    1 86.4%, 0.973, 0.953, 0.941, 0.938, 0.941, 0.953, 0.973, 1
  );
}

応用例

通知メッセージの表示
モーダルウィンドウの出現
「いいね」ボタンのフィードバック
新機能の紹介ツールチップ

まとめ

この記事では、JavaScriptを使わずにHTMLとCSSだけで実装できる6つのアニメーションを紹介しました。

実装のポイント

パフォーマンス重視: CSSアニメーションはGPUで処理されるため、JavaScriptより高速
メンテナンス性: コードがシンプルで理解しやすい
アクセシビリティ: ユーザーがprefers-reduced-motionを設定している場合は配慮が必要

アクセシビリティへの配慮
アニメーションが苦手なユーザー向けには、以下のコードを追加することをおすすめします。

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

参考

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up