transitionプロパティ
transitionプロパティは、CSSアニメーションを定義するプロパティです。hoverなどによる動きのある表現をより滑らかに動かすことができます。
エレメントに動きを与えますが、CSSアニメーションはその機能するCSSプロパティのみです。
transitionプロパティはtransition-property、transition-duration、transition-timing-function、transition-delayプロパティの機能を一括して定義できます。
transition-property | 動きを与えるCSSプロパティを指定 |
transition-duration | CSSアニメーションの動作にかかる時間 |
transition-timing-function | CSSアニメーションの動き方 |
transition-delay | CSSアニメーションの始まるまでの時間 |
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の第1引数で指定されたCSSプロパティがCSSアニメーションの対象です。ここでは、back-shadowプロパティです。
マウスをエレメントに乗せてから1秒後にCSSアニメーションが始まります。 さらに、マウスをエレメントから離すと1秒後に戻るアニメーションが始まります。
関連(Related)
HTML、CSS、DOMのCSSアニメーションに関する用途一覧です。 CSSアニメーションができるかはCSSのプロパティによります。
HTML
CSS
DOM
- インターフェース
- AnimationEvent、 PopStateEvent
- イベント
- animationend、 animationiteration、 animationstart
- プロパティ
- animationName、 elapsedTime、 propertyName
- メソッド