Title

animation-nameとは

ここで説明するanimation-name とは次の語句からなるCSSのプロパティです。

animation

読み: アニメーション
意味: 動画、アニメーション

name

読み: ネーム
意味: 名前

目次に戻る

animation-nameプロパティの概要

このプロパティにアニメーションを識別する @keyframes 名を指定することで、要素にそのアニメーションの効果を付けることができます。

要素にアニメーション効果を付けて実行するためには、要素に対して、最低でもanimation-nameプロパティで@keyframes名を指定し、 なおかつ animation-duration プロパティで1回のアニメーションを実行する所要時間を指定しなければいけません。

@keyframes名は英文字aからz、またはAからZ、 数字の0から9、アンダースコア (_)、ダッシュ (-) を使用することができます。 なお、none、unset、initial、inheritの単語はキーワード値として予約されているので使用してはいけません。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。このプロパティの記述は以下のような書き方になります。

セレクター{animation-name: @keyframes名;}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

このサンプルに使用しているのは、div要素です。

初期値: none

初期値のnoneキワードは、キーフレームス名を指定しないので、アニメーションは実行されません。

div{animation-name: none;}

目次に戻る

キーフレームス名: 適用するキーフレームス名を指定する

要素にアニメーション効果をつけるためには、animation-nameと @keyframes とを結びつけます。

このサンプルでは二つのキーフレームスを作成しています。 myColorRedはフォントのカラーを赤系色から黒色に変化させます。 また、myColorGreenはフォントのカラーを緑系色から黒に変化させます。

通常はキーフレームスにmyColorRedが指定されていますが、ユーザーが要素にマウスオーバーした時にmyColorGreenが適用されます。

@keyframes myColorRed {
	from{
		color: deeppink;
	}
	to{
		color: black;
	}
}
@keyframes myColorGreen {
	from{
		color: greenyellow;
	}
	to{
		color: black;
	}
}
div{
	animation-duration: 0.5s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-name: myColorRed;
}
div:hover{
	animation-name: myColorGreen;
}

使用したその他のプロパティは以下のとおりです。

• animation-duration: 一回のアニメーション完了の所要時間を指定;
• animation-iteration-count: アニメーション周期の再生回数を指定;
• animation-direction: アニメーションの反転動作を指定

目次に戻る

グローバル値

animation-nameプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

• inheritは親要素の値の継承を促します。
• initialは値を初期値のnoneに戻します。
• unsetは継承の初期値に戻します。
  ※このプロパティは親要素の値を継承しないのが基本なので、initialと同じ働きをします。

セレクター{animation-name: グローバル値;}

目次に戻る

補足説明

• すべての要素に適用可能
• 親要素の値を継承しない

目次に戻る

まとめ

ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。

以下にこの「まとめ」のセクションに使用している他のCSSのコードを掲載しておきます。

@keyframes myTranslateX{
	from{
		transform: translateX(0);
	}
	to{
		transform: translateX(9cm);
	}
}
@keyframes myFont-size{
	from{
		font-size: 80%;
	}
	to{
		font-size: 120%;
	}
}
要素名{
	animation-duration: 0.5s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

animation-name: none;

animation-name: myTranslateX;

animation-name: myFont-size;

目次に戻る