animation-name

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年9月⁩.

animation-name は CSS のプロパティで、要素に適用されるアニメーションを記述する 1 つまたは複数の @keyframes アットルールの名前を指定します。複数の @keyframes アットルールをカンマ区切りの文字列で指定します。指定した名前がどの @keyframes アットルールにも一致しない場合、プロパティはアニメーションしません。

試してみましょう

animation-name: none;

animation-name: slide;

animation-name: bounce;

<section class="flex-column" id="default-example"> <div class="animating" id="example-element"></div> </section>

#example-element { animation-direction: alternate; animation-duration: 1s; animation-iteration-count: infinite; animation-timing-function: ease-in; background-color: #1766aa; border-radius: 50%; border: 5px solid #333; color: white; height: 150px; margin: auto; margin-left: 0; width: 150px; } @keyframes slide { from { background-color: orange; color: black; margin-left: 0; } to { background-color: orange; color: black; margin-left: 80%; } } @keyframes bounce { from { background-color: orange; color: black; margin-top: 0; } to { background-color: orange; color: black; margin-top: 40%; } }

アニメーションのプロパティすべてを一度に設定するには、一括指定プロパティである animation プロパティを使用すると便利です。

構文

css

/* アニメーションなし */ animation-name: none; /* 単一のアニメーション */ animation-name: test_05; animation-name: -specific; animation-name: "sliding-vertically"; /* 複数のアニメーション */ animation-name: test1, animation4; animation-name: none, -moz-specific, sliding; /* グローバル値 */ animation-name: inherit; animation-name: initial; animation-name: revert; animation-name: revert-layer; animation-name: unset;

値

none: キーフレームがないことを示す特別なキーワード。他の識別子の順序を変更せずにアニメーションを非アクティブにする、またはカスケードからのアニメーションを非アクティブにするために使用できます。
<custom-ident>: アニメーションを識別する、引用符で囲まれていない名前です。識別子は大文字小文字の区別がない英文字 a から z、数字 0 から 9、アンダースコア (_)、ダッシュ (-) から成ります。最初のダッシュ以外の文字は英文字でなければなりません。また、二重ダッシュは識別子の先頭では禁止されています。さらに、識別子は none, unset, initial, inherit であってはなりません。
<string>: 上記で記述されているカスタム識別子と同じ規則に従う一連の文字で、二重引用符 (") または単一引用符 (') で囲まれている点が異なります。 animation-name と対応する @keyframes アットルールの名前の両方に引用符で囲まれた文字列を使用する場合、none、グローバルキーワード、アンダースコアまたは二重ダッシュで始まる名前は有効ですが、使用は推奨されません。

メモ: animation-* プロパティにカンマ区切りで複数の値を指定した場合、 animation-name に現れる順にアニメーションに適用されます。アニメーションの数と animation-* プロパティの値が一致しない場合は、複数のアニメーションプロパティ値の設定を参照してください。

公式定義

初期値	`none`
適用対象	すべての要素、`::before` / `::after` 擬似要素
継承	なし
計算値	指定通り
アニメーションの種類	アニメーション不可

形式文法

animation-name = 
 [ none | <keyframes-name> ]# 

<keyframes-name> = 
 <custom-ident> |
 <string>

例

アニメーションに名前を付ける

このアニメーションは animation-name を rotate としています。

HTML

html

<div class="box"></div>

CSS

css

.box { background-color: rebeccapurple; border-radius: 10px; width: 100px; height: 100px; } .box:hover { animation-name: rotate; animation-duration: 0.7s; } @keyframes rotate { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }