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

animation-nameプロパティ

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

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

 animation プロパティによって一括でCSSアニメーションを指定する方法もあります。

構文(Syntax)

CSS

animation-name:[ none | name | initial | inherit ];

DOM(JavaScript)

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

値(Values)

Value摘要
none初期値(default値)
name@keyframesで定義した名称(keyframename)
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考(Remarks)

初期値(Default value)none
継承(Inherited)no
変化(Animatable)no

Example

-->