diff options
Diffstat (limited to 'files/ja/web/css/transition/index.md')
| -rw-r--r-- | files/ja/web/css/transition/index.md | 124 |
1 files changed, 54 insertions, 70 deletions
diff --git a/files/ja/web/css/transition/index.md b/files/ja/web/css/transition/index.md index a260f7e864..5151367fff 100644 --- a/files/ja/web/css/transition/index.md +++ b/files/ja/web/css/transition/index.md @@ -3,36 +3,34 @@ title: transition slug: Web/CSS/transition tags: - CSS - - CSS Property - - CSS Transitions - CSS プロパティ - CSS トランジション - - Reference + - リファレンス - recipe:css-shorthand-property +browser-compat: css.properties.transition translation_of: Web/CSS/transition --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<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> +**`transition`** は [CSS](/ja/docs/Web/CSS) のプロパティで、 {{cssxref("transition-property")}}、 {{cssxref("transition-duration")}}、 {{cssxref("transition-timing-function")}}、 {{cssxref("transition-delay")}} の[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)です。 -<div>{{EmbedInteractiveExample("pages/css/transition.html")}}</div> +{{EmbedInteractiveExample("pages/css/transition.html")}} -<p>トランジション (transition) は、要素の 2 つの状態間の変化を定義するためのものです。それぞれの状態は {{cssxref(":hover")}} や {{cssxref(":active")}} のような<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>で定義されたり、 JavaScript を使用して動的に設定されたりします。</p> +トランジション (transition) は、要素の 2 つの状態間の変化を定義するためのものです。それぞれの状態は {{cssxref(":hover")}} や {{cssxref(":active")}} のような[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で定義されたり、 JavaScript を使用して動的に設定されたりします。 -<h2 id="Constituent_properties">構成要素のプロパティ</h2> +## 構成要素のプロパティ -<p>このプロパティは以下の CSS プロパティの一括指定です。</p> +このプロパティは以下の CSS プロパティの一括指定です。 -<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> +- [`transition-delay`](/ja/docs/Web/CSS/transition-delay) +- [`transition-duration`](/ja/docs/Web/CSS/transition-duration) +- [`transition-property`](/ja/docs/Web/CSS/transition-property) +- [`transition-timing-function`](/ja/docs/Web/CSS/transition-timing-function) -<h2 id="Syntax">構文</h2> +## 構文 -<pre class="brush:css no-line-numbers">/* 1つのプロパティへの適用 */ +```css +/* 1 つのプロパティへの適用 */ /* プロパティ名 | 時間 */ transition: margin-right 4s; @@ -45,7 +43,7 @@ transition: margin-right 4s ease-in-out; /* プロパティ名 | 時間 | イージング関数 | 遅延 */ transition: margin-right 4s ease-in-out 1s; -/* 2つのプロパティへの適用 */ +/* 2 つのプロパティへの適用 */ transition: margin-right 4s, color 1s; /* 変化するすべてのプロパティへの適用 */ @@ -54,48 +52,49 @@ transition: all 0.5s ease-out; /* グローバル値 */ transition: inherit; transition: initial; +transition: revert; transition: unset; -</pre> +``` -<p><code>transition</code> プロパティは、 1 つまたは複数の単体プロパティによるトランジションを、コンマで区切って指定します。</p> +`transition` プロパティは、 1 つまたは複数の単体プロパティによるトランジションを、カンマで区切って指定します。 -<p>それぞれの単体プロパティのトランジションでは、単体のプロパティ (または特別な値である <code>all</code> および <code>none</code>) に適用されるトランジションを記述します。記述は以下の通りです。</p> +それぞれの単体プロパティのトランジションでは、単体のプロパティ (または特別な値である `all` および `none`) に適用されるトランジションを記述します。記述は以下の通りです。 -<ul> - <li>トランジションを適用するプロパティを表す 0 ～ 1 個の値。以下のうちの一つです。 - <ul> - <li><code>none</code> キーワード</li> - <li><code>all</code> キーワード</li> - <li>CSS プロパティの名前である {{cssxref("<custom-ident>")}}</li> - </ul> - </li> - <li>使用するイージング関数を表す 0 または 1 個の {{cssxref("<easing-function>")}} の値</li> - <li>0 ～ 2 個の {{cssxref("<time>")}} の値。 1 番目の値は {{cssxref("transition-duration")}} に割り当てられる時間として解釈され、 2 番目の値は {{cssxref("transition-delay")}} に割り当てられる時間として解釈されます。</li> -</ul> +- トランジションを適用するプロパティを表す 0 ～ 1 個の値。以下のうちの一つです。 -<p>プロパティ値の一覧が同じ長さではない場合については、<a href="/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#when_property_value_lists_are_of_different_lengths">プロパティ値のリストの長さが異なる場合</a>を参照してください。つまり、実際にアニメーション化されているプロパティの数を超える余分なトランジションの記述は無視されます。</p> + - `none` キーワード + - `all` キーワード + - CSS プロパティの名前である {{cssxref("<custom-ident>")}} -<h2 id="Formal_definition">公式定義</h2> +- 使用するイージング関数を表す 0 または 1 個の {{cssxref("<easing-function>")}} の値 +- 0 ～ 2 個の {{cssxref("<time>")}} の値。 1 番目の値は {{cssxref("transition-duration")}} に割り当てられる時間として解釈され、 2 番目の値は {{cssxref("transition-delay")}} に割り当てられる時間として解釈されます。 -<p>{{CSSInfo}}</p> +プロパティ値の一覧が同じ長さではない場合については、[プロパティ値のリストの長さが異なる場合](/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#when_property_value_lists_are_of_different_lengths)を参照してください。つまり、実際にアニメーション化されているプロパティの数を超える余分なトランジションの記述は無視されます。 -<h3 id="Formal_syntax">形式文法</h3> +## 公式定義 + +{{CSSInfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Examples">例</h2> +## 例 -<h3 id="Simple_example">単純な例</h3> +### 単純な例 -<p>この例では、ユーザーが要素の上にカーソルを置いたときに、 1 秒間の遅延をつけて 4 秒間でフォントサイズの遷移を行います。</p> +この例では、ユーザーが要素の上にカーソルを置いたときに、 1 秒間の遅延をつけて 4 秒間でフォントサイズの遷移を行います。 -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><a class="target">Hover over me</a></pre> +```html +<a class="target">この上にポインターを移動してください</a> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css">.target { +```css +.target { font-size: 14px; transition: font-size 4s 1s; } @@ -103,38 +102,23 @@ transition: unset; .target:hover { font-size: 36px; } -</pre> +``` + +#### 結果 -<p>{{EmbedLiveSample('Simple_example', 600, 100)}}</p> +{{EmbedLiveSample('Simple_example', 600, 100)}} -<p><a href="/ja/docs/Web/CSS/CSS_Transitions">CSS transitions</a> の記事に、 CSS トランジションの例がいくつかあります。</p> +[CSS トランジションの使用](/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions) の記事に、 CSS トランジションの例がいくつかあります。 -<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> +{{Specifications}} -<h2 id="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat("css.properties.transition")}}</p> +{{Compat}} -<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> +- [CSS トランジションの使用](/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions) +- {{ domxref("TransitionEvent") }} |