transition
CSS の transition
プロパティは、 transition-property
、 transition-duration
、 transition-timing-function
、 transition-delay
の一括指定プロパティです。
この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
遷移 (transition) によって、要素の2つの状態間の変化を定義することができます。それぞれの状態は :hover
や :active
のような疑似クラスで定義するか、 JavaScript を使用して動的に設定します。
構文
/* 1つのプロパティへの適用 */
/* プロパティ名 | 時間 */
transition: margin-right 4s;
/* プロパティ名 | 時間 | 遅延 */
transition: margin-right 4s 1s;
/* プロパティ名 | 時間 | 時間関数 */
transition: margin-right 4s ease-in-out;
/* プロパティ名 | 時間 | 時間関数 | 遅延 */
transition: margin-right 4s ease-in-out 1s;
/* 2つのプロパティへの適用 */
transition: margin-right 4s, color 1s;
/* 変化するすべてのプロパティへの適用 */
transition: all 0.5s ease-out;
/* グローバル値 */
transition: inherit;
transition: initial;
transition: unset;
transition
プロパティは、1つまたは複数の単体プロパティによる遷移を、コンマで区切って指定します。
それぞれの単体プロパティの遷移では、単体のプロパティ(または特別な値である all
および none
)に適用される遷移を記述します。記述は以下の通りです。
- 遷移を適用するプロパティを表す0~1個の値。以下のうちの一つです。
none
キーワードall
キーワード- CSS プロパティの名前である
<custom-ident>
- 使用するタイミング関数を表す0~1個の
<single-transition-timing-function>
の値 - 0~2個の
<time>
の値。1番目の値はtransition-duration
に割り当てられる時間として解釈され、2番目の値はtransition-delay
に割り当てられる時間として解釈されます。
プロパティ値の一覧が同じ長さではない場合については、 how things are handled を参照してください。 つまり、実際にアニメーション化されているプロパティの数を超える余分な遷移の記述は無視されます。
構文形式
<single-transition>#ここで
<single-transition> = [ none | <single-transition-property> ] || <time> || <easing-function> || <time>
ここで
<single-transition-property> = all | <custom-ident>
<easing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function>ここで
<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(
[0,1]>, <number>, [0,1]>, <number>)
<step-timing-function> = step-start | step-end | steps(<integer>[, <step-position>]?)ここで
<step-position> = jump-start | jump-end | jump-none | jump-both | start | end
例
CSS transitions の記事に、トランジションの例がいくつかあります。
仕様書
仕様書 | 策定状況 | コメント |
---|---|---|
CSS Transitions transition の定義 |
草案 | 初回定義 |
初期値 | 一括指定の次の各プロパティとして |
---|---|
適用対象 | すべての要素、::before / ::after 擬似要素 |
継承 | なし |
計算値 | 一括指定の次の各プロパティとして
|
アニメーションの種類 | 離散値 |
ブラウザー実装状況
BCD tables only load in the browser