備忘録的リファレンス

transitionプロパティ

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

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

transition-property動きを与えるCSSプロパティを指定
transition-durationCSSアニメーションの動作にかかる時間
transition-timing-functionCSSアニメーションの動き方
transition-delayCSSアニメーションの始まるまでの時間
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;
}

 似たプロパティでanimationプロパティを使う方法があります。

構文(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親要素(親エレメント)のプロパティを継承します。

Example

 transitionの例です。 transitionの第1引数で指定されたCSSプロパティがCSSアニメーションの対象です。ここでは、back-shadowプロパティです。

 マウスをエレメントに乗せてから1秒後にCSSアニメーションが始まります。 さらに、マウスをエレメントから離すと1秒後に戻るアニメーションが始まります。