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
関連(Related)
HTML、CSS、DOMのCSSアニメーションに関する用途一覧です。 CSSアニメーションができるかはCSSのプロパティによります。
HTML
CSS
DOM
- インターフェース
- AnimationEvent、 PopStateEvent
- イベント
- animationend、 animationiteration、 animationstart
- プロパティ
- animationName、 elapsedTime、 propertyName
- メソッド