animation-name プロパティ
animation-name プロパティは、@keyframes セレクターで定義した CSS アニメーションをエレメントに反映するのためのプロパティです。
@keyframes セレクターで定義した CSS アニメーションの名称を、エレメントの animation-name プロパティで指定します。
animation プロパティで、@keyframes セレクターで定義した CSS アニメーションの名称と一括で指定する方法もあります。
ページ内 Index
構文(Syntax)
animation-name プロパティの構文についてです。name は @keyframes セレクターで定義した CSS アニメーションの名称です。
CSS
DOM ( JavaScript )
値(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 プロパティ
プロパティ | 概要 |
---|---|
animation | CSSアニメーションのプロパティを一括指定 |
animation-delay | 実行までの待ち時間。 |
animation-direction | 再生/逆再生の設定。 |
animation-duration | CSS animationの実行時間。 |
animation-fill-mode | 実行時間外の動作。 |
animation-iteration-count | 再生回数。 |
animation-name | @keyframesセレクターで定義したCSS animation名。 |
animation-play-state | 実行/停止かの設定。 |
animation-timing-function | 実行速度曲線を定義 |