transition
==========

**`transition`** は CSS のプロパティで、 `transition-property`、 `transition-duration`、 `transition-timing-function`、 `transition-delay` の一括指定プロパティです。

試してみましょう
--------

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

構成要素のプロパティ
----------

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

* `transition-delay`
* `transition-duration`
* `transition-property`
* `transition-timing-function`
構文
--


```css
/\* 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-delay`: `0s`
* `transition-duration`: `0s`
* `transition-property`: すべて
* `transition-timing-function`: `ease`
* `transition-behavior` (en-US): `normal`
 |
| 適用対象 | すべての要素、`::before` / `::after` 擬似要素 |
| 継承 | なし |
| 計算値 | 一括指定の次の各プロパティとして* `transition-delay`: 指定通り
* `transition-duration`: 指定通り
* `transition-property`: 指定通り
* `transition-timing-function`: 指定通り
* `transition-behavior` (en-US): 指定通り
 |
| アニメーションの種類 | アニメーション不可 |

形式文法
----
```

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


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


#### CSS


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

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


#### 結果

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

仕様書
---

| Specification |
| --- |
| CSS Transitions # transition-shorthand-property |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* CSS トランジションの使用
* `TransitionEvent`