animation-name
CSS の animation-name
プロパティは、要素に適用される1つまたは複数のアニメーションを設定します。それぞれの名前はアニメーションシーケンスのプロパティ値を定義する @keyframes
@-規則を設定します。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
アニメーションのプロパティすべてを一度に設定するには、一括指定プロパティである animation
プロパティを使用すると便利です。
構文
/* 単一のアニメーション */
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: initial
animation-name: inherit
animation-name: unset
値
none
- キーフレームがないことを示す特別なキーワード。他の識別子の順序を変更せずにアニメーションを非アクティブにする、またはカスケードからのアニメーションを非アクティブにするために使用できます。
<custom-ident>
- アニメーションを識別する名前です。識別子は大文字小文字の区別がない英文字
a
からz
、 数字0
から9
、 アンダースコア (_
)、 ダッシュ (-
) から成ります。最初のダッシュ以外の文字は英文字でなければなりません。また、二重ダッシュは識別子の先頭では禁止されています。さらに、識別子はnone
,unset
,initial
,inherit
であってはなりません。
メモ: animation-*
プロパティにコンマ区切りで複数の値を指定した場合、 animation-name
プロパティで指定したアニメーションに割り当てられますが、いくつあるかによって異なる方法で割り当てられます。詳しくは、複数のアニメーションプロパティ値の設定を参照してください。
形式文法
[ none | <keyframes-name> ]#ここで
<keyframes-name> = <custom-ident> | <string>
例
CSS アニメーションを参照してください。
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Animations Level 1 animation-name の定義 |
草案 | 初回定義 |
初期値 | none |
---|---|
適用対象 | すべての要素、::before / ::after 擬似要素 |
継承 | なし |
計算値 | 指定通り |
アニメーションの種類 | 離散値 |
ブラウザーの対応
BCD tables only load in the browser
関連情報
- CSS アニメーションの使用
- JavaScript
AnimationEvent
API