備忘録的リファレンス

transitionプロパティ

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

　transitionプロパティはtransition-property、transition-duration、transition-timing-function、transition-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: [ 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親要素（親エレメント）のプロパティを継承します。

Example

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

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