transition

トランジション (transition) は、要素の 2 つの状態間の変化を定義するためのものです。それぞれの状態は :hover や :active のような擬似クラスで定義されたり、 JavaScript を使用して動的に設定されたりします。

このプロパティは以下の CSS プロパティの一括指定です。

• transition-behavior Experimental
• transition-delay
• transition-duration
• transition-property
• transition-timing-function

/* 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;

/* プロパティ名 | 再生時間 | 振る舞い */
transition: display 4s allow-discrete;

/* 2 つのプロパティへの適用 */
transition:
  margin-right 4s,
  color 1s;

/* 変化するすべてのプロパティへの適用 */
transition: all 0.5s ease-out allow-discrete;
transition: 200ms linear 50ms;

/* グローバル値 */
transition: inherit;
transition: initial;
transition: revert;
transition: revert-layer;
transition: unset;

transition プロパティの値は、以下のどちらかで指定します。

• 特別な値 none は、この要素にトランジションが発生しないことを指定します。これが既定値です。
• カンマ区切りの、トランジションする 1 つ以上の単体プロパティ。

それぞれの単体プロパティのトランジションでは、単体のプロパティまたはすべてのプロパティに適用されるトランジションを記述します。記述は以下の通りです。

• トランジションを適用するプロパティ（群）を表す 0 ～ 1 個の値。以下のいずれかで設定することができます。
  • <custom-ident> は単体のプロパティを表します。
  • 特別な値 all は、要素の状態が変化したときに変化するすべてのプロパティにトランジションを適用することを指定します。
  • 値を指定しない場合、値は all とみなされ、指定したトランジションは変化するすべてのプロパティに適用されます。
• 使用するイージング関数を表す 0 ～ 1 個の <easing-function> の値。
• 0 ～ 2 個の <time> の値。 1 番目の値は transition-duration に割り当てられる再生時間として解釈され、 2 番目の値は transition-delay に割り当てられる待ち時間として解釈されます。
• アニメーション動作が離散的であるプロパティに対して、トランジションを始めるかどうかを宣言する 0 または 1 つの値。この値が存在する場合、キーワード allow-discrete またはキーワード normal のどちらかになります。

単体プロパティのトランジションに、 all をトランジションするプロパティとして指定したものの、その後で <custom-ident> の値によって単体のプロパティを指定した場合、後のトランジションが先のものを上書きします。例えば次のように指定されていたとします。

transition:
  all 200ms,
  opacity 400ms;

この場合、要素の状態が変わると変化するプロパティは、 opacity を除き、すべて 200ms の再生時間でトランジションします。

プロパティ値の一覧が同じ長さではない場合については、プロパティ値のリストの長さが異なる場合を参照してください。つまり、実際にアニメーション化されているプロパティの数を超える余分なトランジションの記述は無視されます。

transition = 
  <single-transition>#  

<single-transition> = 
  [ none | <single-transition-property> ]  ||
  <time>                                   ||
  <easing-function>                        ||
  <time>                                   

<single-transition-property> = 
  all             |
  <custom-ident>  

<easing-function> = 
  <linear-easing-function>        |
  <cubic-bezier-easing-function>  |
  <step-easing-function>          

<linear-easing-function> = 
  linear      |
  <linear()>  

<cubic-bezier-easing-function> = 
  ease              |
  ease-in           |
  ease-out          |
  ease-in-out       |
  <cubic-bezier()>  

<step-easing-function> = 
  step-start  |
  step-end    |
  <steps()>   

<linear()> = 
  linear( [ <number> && <percentage>{0,2} ]# )  

<cubic-bezier()> = 
  cubic-bezier( [ <number [0,1]> , <number> ]#{2} )  

<steps()> = 
  steps( <integer> , <step-position>? )  

<step-position> = 
  jump-start  |
  jump-end    |
  jump-none   |
  jump-both   |
  start       |
  end         

この例では、ユーザーが要素の上にポインターを当てたとき、 4 秒間の font-size のトランジションが起こるまでに 1 秒の待ち時間があります。

HTML

<a class="target">ポインターを当ててください</a>

CSS

2 つの <time> 値を記述しています。 transition の一括指定では、最初の <time> 値は transition-duration です。 2 つ目の time 値は transition-delay です。省略した場合の既定値はどちらも 0s です。

.target {
  font-size: 14px;
  transition: font-size 4s 1s;
}

.target:hover {
  font-size: 36px;
}

• CSS トランジションモジュール
• CSS トランジションの使用
• TransitionEvent