備忘録的リファレンス

transitionプロパティ

 transitionプロパティは、CSSアニメーションを定義するプロパティです。hoverなどによる動きのある表現をより滑らかに動かすことができます。
 エレメントに動きを与えますが、CSS Animationはその機能するエレメントのみです。

 transitionプロパティはtransition-propertytransition-durationtransition-timing-functiontransition-delayプロパティの機能を一括定義できます。

transitionプロパティ
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: [ propertydurationtiming-functiondelay ] | initial | inherit;

DOM(JavaScript)

値の取得
String = object.style.transition;
値の設定
object.style.transition="[ propertydurationtiming-functiondelay ] | initial | inherit";

Values

Value摘要
property動作をするプロパティ名を指定
duration動作が完了までの時間を秒で設定
timing-function動作の変化の仕方を定義
delay動作を開始するまでの時間を秒で設定
initial初期値に戻します。
inherit親要素(親エレメント)のプロパティを継承します。