animation プロパティ
animation プロパティは、@keyframes セレクターで定義した CSS アニメーションをエレメントに反映するためのプロパティです。
CSS を利用したアニメーションによって、タグエレメントに動きのある変化をもたせることができます。
div:hover{
animation: mymove 1s forwards;
}
@keyframes mymove {
from {
}
to {
box-shadow: 10px 10px;
}
}
GIFや動画、JavaScriptによるイメージを変化させるものもアニメーションと呼ぶため、ここでは CSS アニメーションと呼びます。
エレメントに設定された影や形に変化を持たせることができるもので、ゲームキャラクターのようなアニメーションではありません。
animation プロパティは、以下の CSS animation に関するプロパティを一括で定義できるプロパティです。
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
- animation-fill-mode
- animation-play-state
簡易な CSS アニメーションには transition プロパティ を使用することもできます。
ページ内 Index
構文(Syntax)
CSS
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
DOM ( JavaScript )
object.style.animation
object.style.animation="name duration timing-function delay iteration-count direction fill-mode play-state"
値(Values)
Value | 摘要 |
---|---|
animation-name | @keyframesセレクターで定義したCSS animation名。 |
animation-duration | CSS animationの実行時間。 |
animation-timing-function | CSS animationの実行速度曲線。 |
animation-delay | 実行までの待ち時間。 |
animation-iteration-count | 再生回数。 |
animation-direction | 再生/逆再生の設定。 |
animation-fill-mode | 実行時間外の動作。 |
animation-play-state | 実行/停止かの設定。 |
initial | 初期値に戻す。 |
inherit | 親エレメントのプロパティを継承。 |
備考(Remarks)
初期値(Default value) | none 0 ease 0 1 normal none running |
継承(Inherited) | no |
変化(Animatable) | no |
Example
関連 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 | 実行速度曲線を定義 |