animation-name：アニメーションの名前を定義する

X
f
LINE
B!
p

初期値	`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%; }
}