---
title: transition
slug: Web/CSS/transition
tags:
  - CSS
  - CSS Property
  - CSS Transitions
  - CSS プロパティ
  - CSS トランジション
  - Reference
  - recipe:css-shorthand-property
translation_of: Web/CSS/transition
---
<div>{{CSSRef}}</div>

<p><strong><code>transition</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、 {{cssxref("transition-property")}}、 {{cssxref("transition-duration")}}、 {{cssxref("transition-timing-function")}}、 {{cssxref("transition-delay")}} の<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定プロパティ</a>です。</p>

<div>{{EmbedInteractiveExample("pages/css/transition.html")}}</div>

<p>トランジション (transition) は、要素の 2 つの状態間の変化を定義するためのものです。それぞれの状態は {{cssxref(":hover")}} や {{cssxref(":active")}} のような<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>で定義されたり、 JavaScript を使用して動的に設定されたりします。</p>

<h2 id="Constituent_properties">構成要素のプロパティ</h2>

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

<ul>
	<li><a href="/ja/docs/Web/CSS/transition-delay"><code>transition-delay</code></a></li>
	<li><a href="/ja/docs/Web/CSS/transition-duration"><code>transition-duration</code></a></li>
	<li><a href="/ja/docs/Web/CSS/transition-property"><code>transition-property</code></a></li>
	<li><a href="/ja/docs/Web/CSS/transition-timing-function"><code>transition-timing-function</code></a></li>
</ul>

<h2 id="Syntax">構文</h2>

<pre class="brush:css no-line-numbers">/* 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;
</pre>

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

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

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

<p>プロパティ値の一覧が同じ長さではない場合については、<a href="/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#when_property_value_lists_are_of_different_lengths">プロパティ値のリストの長さが異なる場合</a>を参照してください。つまり、実際にアニメーション化されているプロパティの数を超える余分なトランジションの記述は無視されます。</p>

<h2 id="Formal_definition">公式定義</h2>

<p>{{CSSInfo}}</p>

<h3 id="Formal_syntax">形式文法</h3>

{{csssyntax}}

<h2 id="Examples">例</h2>

<h3 id="Simple_example">単純な例</h3>

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

<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;a class="target"&gt;Hover over me&lt;/a&gt;</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css">.target {
  font-size: 14px;
  transition: font-size 4s 1s;
}

.target:hover {
  font-size: 36px;
}
</pre>

<p>{{EmbedLiveSample('Simple_example', 600, 100)}}</p>

<p><a href="/ja/docs/Web/CSS/CSS_Transitions">CSS transitions</a> の記事に、 CSS トランジションの例がいくつかあります。</p>

<h2 id="Specifications">仕様書</h2>

<table class="standard-table">
	<thead>
		<tr>
			<th scope="col">仕様書</th>
			<th scope="col">状態</th>
			<th scope="col">備考</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>{{ SpecName('CSS3 Transitions', '#transition-shorthand-property', 'transition') }}</td>
			<td>{{ Spec2('CSS3 Transitions') }}</td>
			<td>初回定義</td>
		</tr>
	</tbody>
</table>

<h2 id="Browser_compatibility">ブラウザーの互換性</h2>

<p>{{Compat("css.properties.transition")}}</p>

<h2 id="See_also">関連情報</h2>

<ul>
	<li><a href="/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">CSS トランジションの使用</a></li>
	<li>{{domxref("TransitionEvent")}}</li>
</ul>