このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
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 プロパティを使用すると便利です。
試してみましょう
animation-name: none;animation-name: slide;animation-name: bounce;<section> <div></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 #333333; 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-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-* プロパティの値が一致しない場合は、複数のアニメーションプロパティ値の設定 を参照してください。
公式定義
形式文法
animation-name =
[none|<keyframes-name>]#
<keyframes-name> =
<custom-ident>|
<string>
例
アニメーションに名前を付ける
このアニメーションはanimation-name をrotate としています。
HTML
<div></div>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); }}結果
矩形にポインターを当てるとアニメーションが始まります。
例についてはCSS アニメーションを参照してください。
仕様書
| Specification |
|---|
| CSS Animations Level 1 # animation-name |