transition

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

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

• 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;

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

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

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

transition プロパティは、 1 つまたは複数の単体プロパティによるトランジションを、カンマで区切って指定します。

それぞれの単体プロパティのトランジションでは、単体のプロパティ (または特別な値である all および none) に適用されるトランジションを記述します。記述は以下の通りです。

• トランジションを適用するプロパティを表す 0 ～ 1 個の値。以下のうちの一つです。
  • none キーワード
  • all キーワード
  • CSS プロパティの名前である <custom-ident>
• 使用するイージング関数を表す 0 または 1 個の <easing-function> の値
• 0 ～ 2 個の <time> の値。 1 番目の値は transition-duration に割り当てられる所要時間として解釈され、 2 番目の値は transition-delay に割り当てられる待ち時間として解釈されます。

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

transition = 
  <single-transition>#  

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

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

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

<linear-easing-function> = 
  linear( <linear-stop-list> )  

<cubic-bezier-easing-function> = 
  ease                                                |
  ease-in                                             |
  ease-out                                            |
  ease-in-out                                         |
  cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )  

<step-easing-function> = 
  step-start                                |
  step-end                                  |
  steps( <integer> [, <step-position> ]? )  

<linear-stop-list> = 
  [ <linear-stop> ]#  

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

<linear-stop> = 
  <number>               &&
  <linear-stop-length>?  

<linear-stop-length> = 
  <percentage>{1,2}  

この例では、ユーザーが要素の上にカーソルを置いたときに、 1 秒間の遅延をつけて 4 秒間でフォントサイズの遷移を行います。

HTML

<a class="target">この上にポインターを移動してください</a>

CSS

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

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

結果

CSS トランジションの使用 の記事に、 CSS トランジションの例がいくつかあります。

• CSS トランジションの使用
• TransitionEvent