animation-name:アニメーションの名前を定義する
初期値 | none |
適用対象 | 全ての要素、疑似要素 |
継承 | しない |
アニメーション | 離散値 |
対応ブラウザ | caniuseで確認 |
animation-nameプロパティの説明
animation-name
は、要素に適用されるアニメーションと@keyframes
を関連付ける名前を生成します。この値に指定した文字列は、@keyframes
で呼び出す祭に使用します。
アニメーション関連のプロパティを一括で制御する場合は、animation
を使用して下さい。
animation-nameに指定できる値
- <custom-ident>
@keyframes
で呼び出す識別子として、アニメーションの名前を指定します。この値には、英字、数字、ダッシュ(-
)、アンダースコア(_
)が使えます。ただし、none
、unset
、initial
、inherit
の文字列ではいけません。- none
- アニメーションがキーフレームを持たないことを示します。アニメーションを非アクティブにする祭に使う特別なキーワードです。
animation-nameの使い方とサンプル
animation-name
プロパティの構文は以下の通りです。
CSS
/* 単一の名前 */
animation-name: keyword;
animation-name: -special;
animation-name: key_name;
/* 複数の値を指定 */
animation-name: anime1, anime2;
animation-name: -pc_move, -sp_move;
animation-name: none, key1, key2;
/* キーワード */
animation-name: none;
/* グローバル値 */
animation-name: initial;
animation-name: inherit;
animation-name: revert;
animation-name: unset;
animation-nameの実例
それでは簡単な例を見てみましょう。@keyframes
で呼び出す名称をanimation-name
プロパティの値で定め、他のプロパティでアニメーションの内容を指定します。
CSS
#as_move {
padding: 10px;
width: 50px;
height: 50px;
background: #ccc;
text-align: center;
animation-name: as_move;
animation-duration: 3s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes as_move {
from { margin-left: 0%; } to { margin-left: 80%; }
}
HTML
<div id="as_move">1</div>
表示確認
上記のプロパティをanimation
にまとめると、以下のような記述になります。
CSS
#as_move {
padding: 10px;
width: 50px;
height: 50px;
background: #ccc;
text-align: center;
animation: 3s linear 0s infinite alternate as_move;
}
@keyframes as_move {
from { margin-left: 0%; } to { margin-left: 80%; }
}
animation-nameに関連するCSSプロパティ
アニメーション | |
---|---|
animation | アニメーションに関する指定をまとめて行う |
animation-name | アニメーションの名前を定義する |
animation-duration | アニメーションの再生一回分の時間の長さを指定する |
animation-timing-function | アニメーションの再生タイミングに変化を付ける |
animation-delay | アニメーションが開始するタイミングを指定する |
animation-iteration-count | アニメーションの繰り返し回数を指定する |
animation-direction | アニメーションの再生方向を指定する |
animation-fill-mode | アニメーションが再生されていない時にどのような状態で待機するかを指定する |
animation-play-state | アニメーションを再生させるか一時停止させるか指定する |