CSS プロパティ animation

CSS animation 属性詳解：滑らかなウェブアニメーション効果を実現する

CSS animation 属性詳解：滑らかなウェブアニメーション効果を実現する

この記事では、CSS の `animation` 属性について詳しく解説します。構文、よく使われるプロパティ、使用方法、サンプルなどを網羅し、ウェブページにアニメーション効果を簡単に実装できるよう、読者の皆様をサポートします。

初めに：CSS アニメーションとは？

CSS アニメーションは、HTML 要素のスタイルを時間の経過とともに変化させることで、動きのある視覚効果を生み出す仕組みです。JavaScript を使用する方法に比べて、CSS アニメーションは以下のような利点があります。

  • パフォーマンスに優れている：JavaScript アニメーションよりも高速に動作するため、特にモバイルデバイスや低スペックマシンで効果を発揮します。
  • コードがシンプルで理解しやすい：JavaScript に比べてコード量が少なく、可読性が高いため、開発効率が向上します。
  • 豊富なアニメーション制御オプション：アニメーションの再生速度、遅延、繰り返しなどを柔軟に設定できます。

`animation` 属性詳解

`animation` 属性は、複数のサブプロパティをまとめて指定するための省略記法です。それぞれのサブプロパティとその役割は以下の通りです。

プロパティ名 説明
animation-name アニメーションの名前を指定します。
animation-duration アニメーションの完了にかかる時間を指定します。(例: 2s, 500ms)
animation-timing-function アニメーションの速度変化を指定します。(例: ease, linear, ease-in-out)
animation-delay アニメーションの開始を遅らせる時間を指定します。(例: 1s, 200ms)
animation-iteration-count アニメーションの繰り返し回数を指定します。(例: 2, infinite)
animation-direction アニメーションの再生方向を指定します。(例: normal, reverse, alternate)
animation-fill-mode アニメーション開始前と終了後の状態を指定します。(例: none, forwards, backwards)
animation-play-state アニメーションの再生状態を制御します。(例: paused, running)

`animation-duration` のサンプル


<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: red;
    /* 2秒かけてアニメーションを完了 */
    animation-duration: 2s; 
  }
</style>

`animation-timing-function` のサンプル


<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-duration: 2s;
    /* ゆっくりと開始し、加速しながら終了 */
    animation-timing-function: ease-in; 
  }
</style>

@keyframes を使用したアニメーションキーフレームの定義

`@keyframes` ルールは、アニメーションの各段階における要素のスタイルを定義します。パーセンテージまたはキーワード `from` (0%) と `to` (100%) を使用して、アニメーションの進行状況を指定します。

構文

```css @keyframes アニメーション名 { 0% { /* 開始時のスタイル */ } 50% { /* 中間点のスタイル */ } 100% { /* 終了時のスタイル */ } } ```

サンプル：シンプルな移動アニメーション


<style>
  @keyframes moveRight {
    from { transform: translateX(0); }
    to { transform: translateX(200px); }
  }

  .box {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: moveRight 2s linear infinite;
  }
</style>

CSS アニメーション実践例

ケーススタディ1：シンプルなフェードイン・フェードアウト効果


<style>
  @keyframes fadeInOut {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
  }

  .box {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: fadeInOut 2s ease-in-out infinite;
  }
</style>

ケーススタディ2：回転するローディングアニメーション


<style>
  @keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  .loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: rotate 2s linear infinite;
  }
</style>

ケーススタディ3：アニメーションでボタンクリックをシミュレート


<style>
  .button {
    padding: 15px 32px;
    font-size: 16px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
  }

  .button:active {
    animation: clickEffect 0.3s ease;
  }

  @keyframes clickEffect {
    0% { transform: scale(1); }
    50% { transform: scale(0.95); }
    100% { transform: scale(1); }
  }
</style>

CSS アニメーションのブラウザ互換性

`animation` プロパティは、主要なブラウザで広くサポートされています。ただし、古いブラウザの中にはサポートしていないものもあるため、注意が必要です。

以下の表は、主要なブラウザとそのバージョンにおける `animation` プロパティのサポート状況を示しています。

ブラウザ バージョン
Chrome 4+
Firefox 5+
Safari 4+
Opera 12+
Internet Explorer 10+

古いブラウザに対応する必要がある場合は、JavaScript ライブラリを使用するか、CSS のプリフィックスを使用して互換性を確保する必要があります。

関連リソース

  • <a href="https://developer.mozilla.org/ja/docs/Web/CSS/animation">animation - CSS | MDN</a>
  • <a href="https://www.w3schools.com/css/css3_animations.asp">CSS3 Animations - W3Schools</a>

よくある質問

Q1: CSS アニメーションと JavaScript アニメーションの違いは何ですか？

A1: CSS アニメーションは、パフォーマンスに優れており、コードがシンプルで理解しやすいという利点があります。一方、JavaScript アニメーションは、より複雑なアニメーションを作成する場合に適しています。

Q2: `animation` プロパティのすべてのサブプロパティを指定する必要がありますか？

A2: いいえ、すべてのサブプロパティを指定する必要はありません。省略した場合は、デフォルト値が使用されます。

Q3: 古いブラウザで CSS アニメーションを動作させるにはどうすればよいですか？

A3: 古いブラウザに対応する必要がある場合は、JavaScript ライブラリを使用するか、CSS のプリフィックスを使用して互換性を確保する必要があります。