CSS animation-name 属性を徹底解説

CSS プロパティ animation-name

CSSの `animation-name` 属性は、要素に適用するアニメーションの名前を指定するために使用されます。この属性は、Webページに動きとインタラクティブ性を加えるために不可欠なCSSアニメーションの中核を担っています。この記事では、`animation-name` 属性の定義、構文、値、コード例などを詳しく解説し、 Webアニメーション技術の習得を支援します。

1. animation-name 属性とは？

`animation-name` 属性は、要素に適用するアニメーションの名前を指定します。この属性単体ではアニメーションは実行されず、`@keyframes` ルールで定義されたアニメーションと組み合わせて使用します。 `@keyframes` ルールで定義されたアニメーションに名前を付け、`animation-name` 属性でその名前を指定することで、要素に特定のアニメーション効果を適用することができます。

2. animation-name 属性の構文

`animation-name` 属性の構文は以下の通りです。


animation-name: none | <keyframes-name>;

none: デフォルト値です。アニメーションが適用されていないことを示します。
<keyframes-name>: 開発者が定義した `@keyframes` ルールの名前を指定します。

3. animation-name 属性の値

3.1 none

`animation-name` 属性の値に `none` を指定すると、要素にアニメーションは適用されません。これは、`animation-name` 属性を明示的に無効化する場合や、 JavaScriptなどで動的にアニメーションを制御する場合に便利です。


<!DOCTYPE html>
<html>
<head>
  <title>animation-name 属性の例</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="box">アニメーションなし</div>
</body>
</html>

3.2 <keyframes-name>

`animation-name` 属性の値に <keyframes-name> を指定すると、指定した名前の `@keyframes` ルールで定義されたアニメーションが要素に適用されます。


<!DOCTYPE html>
<html>
<head>
  <title>animation-name 属性の例</title>
  <style>
    /* example-animation という名前のアニメーションを定義 */
    @keyframes example-animation {
      from {
        background-color: red;
      }
      to {
        background-color: blue;
      }
    }

    .box {
      width: 100px;
      height: 100px;
      background-color: red;
    }

    /* example-animation アニメーションを .box 要素に適用 */
    .box.animated {
      animation-name: example-animation;
      animation-duration: 2s; 
    }
  </style>
</head>
<body>
  <div class="box">アニメーションなし</div>
  <div class="box animated">アニメーションあり</div>
</body>
</html>

4. animation-name 属性を使用する際の注意点

<keyframes-name> の値は、定義した `@keyframes` ルールの名前と完全に一致している必要があります。一致していない場合は、アニメーションは実行されません。
`animation-name` 属性は、`animation-duration`、`animation-timing-function` などの他のアニメーション関連属性と組み合わせて使用することで、より複雑で滑らかなアニメーション効果を実現することができます。これらの属性を適切に設定することで、アニメーションの再生時間、速度変化、遅延などを細かく制御することができます。

5. animation-name 属性のブラウザ対応状況

`animation-name` 属性は、主要なブラウザで広くサポートされています。ただし、古いブラウザの中にはサポートしていないものもあるため、クロスブラウザ対応が必要な場合は、適切なフォールバック処理を検討する必要があります。

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

最新のブラウザ対応状況については、Can I use...などのウェブサイトを参照してください。

6. まとめ

`animation-name` 属性は、要素に適用するアニメーションの名前を指定するために使用されます。この属性は、`@keyframes` ルールで定義されたアニメーションと組み合わせて使用することで、 Webページに動きとインタラクティブ性を加えることができます。 `animation-name` 属性は、他のアニメーション関連属性と組み合わせて使用することで、より複雑で滑らかなアニメーション効果を実現することができます。この記事では、`animation-name` 属性の基本的な使い方から、注意点、ブラウザ対応状況までを解説しました。この記事が、Webアニメーション技術の習得に役立てば幸いです。

CSS animation-name 属性を徹底解説

1. animation-name 属性とは？

2. animation-name 属性の構文

3. animation-name 属性の値

3.1 none

3.2 <keyframes-name>

4. animation-name 属性を使用する際の注意点

5. animation-name 属性のブラウザ対応状況

6. まとめ

関連する質問と回答

Q1. `animation-name` 属性で指定できるアニメーションの名前は、どのように決めればよいですか？

Q2. 複数のアニメーションを同時に適用することはできますか？

Q3. `animation-name` 属性と `transition` プロパティの違いは何ですか？