transitionプロパティ
transitionプロパティは、CSSアニメーションを定義するプロパティです。hoverなどによる動きのある表現をより滑らかに動かすことができます。
エレメントに動きを与えますが、CSS Animationはその機能するエレメントのみです。
transitionプロパティはtransition-property、transition-duration、transition-timing-function、transition-delayプロパティの機能を一括定義できます。
div.example {
background-color: green; width:300px; height:300px;
transition: background,width,height 5s ease-in-out 1s;
}
div.example:hover {
background-color:yellow; width:100px; height:100px;
}
構文(Syntax)
CSS
transition: [ property、duration、timing-function、delay ] | initial | inherit;
DOM(JavaScript)
String = object.style.transition;
object.style.transition="[ property、duration、timing-function、delay ] | initial | inherit";
Values
| Value | 摘要 |
|---|---|
| property | 動作をするプロパティ名を指定 |
| duration | 動作が完了までの時間を秒で設定 |
| timing-function | 動作の変化の仕方を定義 |
| delay | 動作を開始するまでの時間を秒で設定 |
| initial | 初期値に戻します。 |
| inherit | 親要素（親エレメント）のプロパティを継承します。 |