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

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;
	...
}
...

構文(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