備忘録的プログラミングリファレンス

animation-name プロパティ

　animation-name プロパティは、@keyframes セレクターで定義した CSS アニメーションをエレメントに反映するのためのプロパティです。
　@keyframes セレクターで定義した CSS アニメーションの名称を、エレメントの animation-name プロパティで指定します。

animation-name プロパティ
@keyframes example_anime {
	from {
		...
	}
	to {
		...
	}
}
...
div:hover{
	animation-name: example_anime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	...
}
...

詳しくは Example を参照してください

　animation プロパティで、@keyframes セレクターで定義した CSS アニメーションの名称と一括で指定する方法もあります。

ページ内 Index

構文(Syntax)

　animation-name プロパティの構文についてです。name は @keyframes セレクターで定義した CSS アニメーションの名称です。

CSS

animation-name:[ none | name ];

DOM ( JavaScript )

値の取得
object.style.animationName
値の設定
 object.style.animationName = "[ none | name ]"

　グローバル値として initial、inherit、revert、unset も使用することができます。

値（Values）

　以下は animation-name プロパティに指定できる値です。name は @keyframes セレクターで定義した CSS アニメーションの名称のことです。

Value摘要
none初期値（default値）
name@keyframesで定義した名称（keyframename）

　以下のグローバル値も指定できます。

キーワード値機能
initial仕様で決められた設定値
inherit親エレメントの設定値を継承
revertブラウザで設定された値
unset継承値が優先される。値が継承値されるプロパティでは inherit に同じ。継承されない場合は revert に同じ

　指定値を固定化する場合は !important 宣言を加えます。

備考（Remarks）

　animation-name プロパティの備考についてです

初期値（Default value）none
継承（Inherited）no
変化（Animatable）no

Example

　animation-name プロパティは、@keyframes セレクターで定義した CSS アニメーションをエレメントに反映することができます。

　以下の例は枠線の付いたエレメント上にポインターをもっていくと影が伸びる CSS アニメーションを実行します。
　CSS アニメーションの動きは @keyframes セレクター内で定義します。div:hover内で定義した CSS アニメーションを使用しています。

関連 CSS プロパティ

プロパティ概要
animationCSSアニメーションのプロパティを一括指定
animation-delay実行までの待ち時間。
animation-direction再生/逆再生の設定。
animation-durationCSS animationの実行時間。
animation-fill-mode実行時間外の動作。
animation-iteration-count再生回数。
animation-name@keyframesセレクターで定義したCSS animation名。
animation-play-state実行/停止かの設定。
animation-timing-function実行速度曲線を定義

関連（Related）