transition-property プロパティ
transition-property プロパティは、CSS アニメーションとして表現したいプロパティを指定する CSS です。このプロパティでアニメーションのように滑らかな動きを与えたい CSS プロパティを指定します。
transition-property プロパティは、:hover や :focus といった疑似クラスによるスタイルの変更を、滑らかな CSS アニメーションにすることができます。
transition-property: background; transition-duration: 5s; transition-timing-function: ease-in-out;
CSS プロパティをアニメーション化するプロパティには、transition、transition-delay、transition-duration、transition-timing-function があります。
transition-property プロパティによって CSS アニメーションとして動作させるには、transition-duration、transition-timing-function は必要でしょう。
似たプロパティで animation プロパティを使う方法があります。
このプロパティも CSS アニメーションが機能する CSS のプロパティのみに有効です。このプロパティは、より詳細な設定ができます。
ここでいう CSS アニメーションとは、CSS プロパティによる表示をアニメーションのように滑らかに変化するようにするもので、一般的なアニメーション処理のように自由度はありません。
ページ内 Index
構文(Syntax)
CSS
transition-property: all | none | property-name | initial | inherit;
DOM ( JavaScript )
String = object.style.transitionProperty;
object.style.transitionProperty="all | none | property-name | initial | inherit";
値(Values)
プロパティ名はカンマ","で区切ります。
Value | 摘要 |
---|---|
all | 初期値(default値) |
none | 設定しない |
property-name | プロパティ名(カンマ","で区切る) |
initial | 初期値に戻す |
inherit | 親エレメントのプロパティを継承 |
備考(Remarks)
初期値(Default value) | all |
継承(Inherited) | No |
CSS Animation | No |
Example
transition-propertyの例です。 transition-propertyで指定されたCSSプロパティがCSSアニメーションの対象です。ここでは、back-shadowプロパティです。
マウスをエレメントに乗せてから1秒後にCSSアニメーションが始まります。 さらに、マウスをエレメントから離すと1秒後に戻るアニメーションが始まります。
transitionプロパティで一括指定する方法もあります。
関連 CSS プロパティ
以下の関連するプロパティがあります。 transition-property プロパティでアニメーション効果を与えるCSSプロパティを指定します。 transition-*プロパティを使ったCSSアニメーションでは以下のプロパティを使った方がよいでしょう。
transition | 以下のプロパティを一括指定 |
transition-delay | CSSアニメーションの始まるまでの時間 |
transition-duration | CSSアニメーションの動作にかかる時間 |
transition-timing-function | CSSアニメーションの動き方 |