Web/CSS/transition-timing-function を更新

-2021/08/15 時点の英語版に同期

1 files changed, 133 insertions, 145 deletions

diff --git a/files/ja/web/css/transition-timing-function/index.md b/files/ja/web/css/transition-timing-function/index.md
index bce50156f2..7acaa451be 100644
--- a/files/ja/web/css/transition-timing-function/index.md
+++ b/files/ja/web/css/transition-timing-function/index.md
@@ -3,29 +3,29 @@ title: transition-timing-function
 slug: Web/CSS/transition-timing-function
 tags:
   - CSS
-  - CSS Reference
-  - 'CSS:Mozilla Extensions'
-  - Fixit
-  - NeedsNewCompatTable
+  - CSS プロパティ
+  - CSS Transitions
+  - Reference
+  - recipe:css-property
+browser-compat: css.properties.transition-timing-function
 translation_of: Web/CSS/transition-timing-function
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>CSS の <strong><code>transition-timing-function</code></strong> プロパティは、<a href="/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">トランジション効果</a>の作用を受ける CSS プロパティにおいて、中間状態の値を算出する方法を設定するために使用されます。</p>
+**`transition-timing-function`** は CSS のプロパティで、[トランジション効果](/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)の影響を受ける CSS プロパティにおいて、中間状態の値を算出する方法を設定するために使用されます。
 
-<div>{{EmbedInteractiveExample("pages/css/transition-timing-function.html")}}</div>
+{{EmbedInteractiveExample("pages/css/transition-timing-function.html")}}
 
-<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+このプロパティは、簡単に言えば加速曲線を定義するもので、それによりトランジション実行中の値の変更速度を操作することができます。
 
-<p>このプロパティは、簡単に言えば加速曲線を定義するもので、それによりトランジション実行中の値の変更速度を操作することができます。</p>
+この加速曲線は、トランジションが行われるプロパティごとに 1 つの {{cssxref("&lt;easing-function&gt;")}} を用いて定義されます。
 
-<p>この加速曲線は、トランジションが行われるプロパティごとに 1 つの {{cssxref("&lt;timing-function&gt;")}} を用いて定義されます。</p>
+複数のタイミング関数を指定することができます。それぞれのタイミング関数は、 {{ cssxref("transition-property") }} で指定されたように対応するプロパティに適用され、 `transition-property` のリストとして振るまいます。指定されたタイミング関数が `transition-property` のリストより少ない場合は、ユーザーエージェントはリスト内の値をそれぞれのトランジションプロパティのうちの値になるまで繰り返してどの値が使用されるかを計算します。関数の数が多い場合は、リストを適切な長さに切り詰めます。どちらの場合も、 CSS の宣言として妥当です。
 
-<p>複数のタイミング関数を指定することができます。それぞれのタイミング関数は、 {{ cssxref("transition-property") }} で指定されたように対応するプロパティに適用され、 <code>transition-property</code> のリストとして振るまいます。指定されたタイミング関数が <code>transition-property</code> のリストより少ない場合は、ユーザーエージェントはリスト内の値をそれぞれのトランジションプロパティのうちの値になるまで繰り返してどの値が使用されるかを計算します。関数の数が多い場合は、リストを適切な長さに切り詰めます。どちらの場合も、 CSS の宣言として妥当です。</p>
+## 構文
 
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox">/* キーワード値 */
+```css
+/* キーワード値 */
 transition-timing-function: ease;
 transition-timing-function: ease-in;
 transition-timing-function: ease-out;
@@ -52,74 +52,84 @@ transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
 /* グローバル値 */
 transition-timing-function: inherit;
 transition-timing-function: initial;
-transition-timing-function: unset;</pre>
+transition-timing-function: revert;
+transition-timing-function: unset;
+```
 
 <h3 id="Values" name="Values">値</h3>
 
-<dl>
- <dt><code>&lt;timing-function&gt;</code></dt>
- <dd>各々の {{cssxref("&lt;timing-function&gt;")}} は {{ cssxref("transition-property") }} で指定された、トランジションを行うプロパティに対応するタイミング関数を表します。
- <p>非段階のキーワード値 (ease, linear, ease-in-out, など) はそれぞれ4つの固定点による二次元ベジェ曲線を表しており、 cubic-bezier() 関数の値は定義済みの値以外を使用することができます。 The step timing functions divides the input time into a specified number of intervals that are equal in length. It is defined by a number of steps and a step position.</p>
-
- <dl>
-  <dt><code>ease</code></dt>
-  <dd>Equal to <code>cubic-bezier(0.25, 0.1, 0.25, 1.0)</code>, the default value, increases in velocity towards the middle of the transition, slowing back down at the end.</dd>
-  <dt><code>linear</code></dt>
-  <dd>Equal to <code>cubic-bezier(0.0, 0.0, 1.0, 1.0)</code>, transitions at an even speed.</dd>
-  <dt><code>ease-in</code></dt>
-  <dd>Equal to <code>cubic-bezier(0.42, 0, 1.0, 1.0)</code>, starts off slowly, with the transition speed increasing until complete.</dd>
-  <dt><code>ease-out</code></dt>
-  <dd>Equal to <code>cubic-bezier(0, 0, 0.58, 1.0)</code>, starts transitioning quickly, slowing down the transition continues. •</dd>
-  <dt><code>ease-in-out</code></dt>
-  <dd>Equal to <code>cubic-bezier(0.42, 0, 0.58, 1.0)</code>, starts transitioning slowly, speeds up, and then slows down again.</dd>
-  <dt><code>cubic-bezier(p1, p2, p3, p4)</code></dt>
-  <dd>An author defined cubic-Bezier curve, where the p1 and p3 values must be in the range of 0 to 1.</dd>
-  <dt><code>steps( n, &lt;jumpterm&gt;)</code></dt>
-  <dd>Displays the transition along <em>n stops along the transition, displaying each stop for </em>equal lengths of time. For example, if <em>n</em> is 5,  there are 5 steps. Whether the transition holds temporarily at 0%, 20%, 40%, 60% and 80%, on the 20%, 40%, 60%, 80% and 100%, or makes 5 stops between the 0% and 100% along the transition, or makes 5 stops including the 0% and 100% marks (on the 0%, 25%, 50%, 75%, and 100%) depends on which of the following jump terms is used:
-  <dl>
-   <dt><code>jump-start</code></dt>
-   <dd>Denotes a left-continuous function, so that the first jump happens when the transition begins;</dd>
-   <dt><code>jump-end</code></dt>
-   <dd>Denotes a right-continuous function, so that the last jump happens when the animation ends;</dd>
-   <dt><code>jump-none</code></dt>
-   <dd>There is no jump on either end. Instead, holding at both the 0% mark and the 100% mark, each for 1/n of the duration</dd>
-   <dt><code>jump-both</code></dt>
-   <dd>Includes pauses at both the 0% and 100% marks, effectively adding a step during the transition time.</dd>
-   <dt><code>start</code></dt>
-   <dd>Same as <code>jump-start.</code></dd>
-   <dt><code>end</code></dt>
-   <dd>Same as <code>jump-end.</code></dd>
-  </dl>
-  </dd>
-  <dt><code>step-start</code></dt>
-  <dd>Equal to <code>steps(1, jump-start)</code></dd>
-  <dt><code>step-end</code></dt>
-  <dd>Equal to <code>steps(1, jump-end)</code></dd>
- </dl>
- </dd>
-</dl>
-
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+- `<easing-function>`
+
+  - : 各々の {{cssxref("&lt;easing-function&gt;")}} は {{ cssxref("transition-property") }} で指定された、トランジションを行うプロパティに対応するイージング関数を表します。
+
+    段階のないキーワード値 (ease、linear、ease-in-out、など) はそれぞれ 4 つの固定点による三次ベジェ曲線を表しており、 cubic-bezier() 関数の値は定義済みの値以外を使用することができます。段階のあるタイミング関数は、入力の時間を時間的に等しい間隔で指定された数に分割します。これは、ステップ数とステップ位置によって定義されます。
+
+    - `ease`
+      - : `cubic-bezier(0.25, 0.1, 0.25, 1.0)` と同等であり、既定値です。トランジションの半ばまで変化量が増加し、最後にはまた遅くなります。
+    - `linear`
+      - : `cubic-bezier(0.0, 0.0, 1.0, 1.0)` と同等であり、トランジションは均等の速度になります。
+    - `ease-in`
+      - : `cubic-bezier(0.42, 0, 1.0, 1.0)` と同等であり、最初は遅く、トランジションの速度は完了まで増加し続けます。
+    - `ease-out`
+      - : `cubic-bezier(0, 0, 0.58, 1.0)` と同等であり、トランジションは速い速度で始まり、速度を次第に遅くしていきます。
+    - `ease-in-out`
+      - : `cubic-bezier(0.42, 0, 0.58, 1.0)` と同等であり、トランジションをゆっくり開始し、速度を上げた後、再び速度を遅くします。
+    - `cubic-bezier(p1, p2, p3, p4)`
+      - : 作者が定義する三次ベジェ曲線です。p1 と p3 の値は 0 から 1 の範囲でなければなりません。
+    - `steps( n, <jumpterm>)`
+
+      - : トランジションは _n_ 個の停止点を辿って表示され、それぞれの停止点の表示時間は均等な長さになります。例えば、_n_ が 5 の場合、5 つのステップがあることになります。一時的に停止する点が 0%, 20%, 40%, 60%, 80% であるのか、20%, 40%, 60%, 80%, 100% であるのか、トランジションに沿って 0% と 100% の中間で 5 回停止するのか、それとも 0% と 100% の位置を含めて 5 回 (0%, 25%, 50%, 75%, 100%) 停止するのかについては、以下のジャンプ用語のどれを使うかで決まります。
+
+        - `jump-start`
+          - : 左連続関数を表します。すなわち、トランジションの開始時に最初のジャンプが発生します。
+        - `jump-end`
+          - : 右連続関数を表します。すなわち、アニメーションの終了時に最後のジャンプが発生します。
+        - `jump-none`
+          - : どちら側にもジャンプが発生しません。0% の位置と 100% の位置の両方が長さの 1/n だけ表示されます。
+        - `jump-both`
+          - : 0% と 100% の両方で停止が含まれます。その結果、トランジションの時間内にステップが 1 つ追加されます。
+        - `start`
+          - : `jump-start` と同じです。
+        - `end`
+          - : `jump-end` と同じです。
+
+    - `step-start`
+      - : `steps(1, jump-start)` と同じです。
+    - `step-end`
+      - : `steps(1, jump-end)` と同じです。
+
+## アクセシビリティの考慮
+
+アニメーションは、ユーザーがどのようなアクションを期待されているのかを理解するためのガイド、ユーザーインターフェイス内の関係性の表示、どのようなアクションが発生したのかをユーザーに通知するなど、役に立つことがあります。アニメーションは、認知的な負荷を軽減し、変化に気づかないことを防ぎ、空間的な関係をよりよく思い出すことに役立ちます。しかし、アニメーションの中には、注意欠陥多動性障害 (ADHD) の人の認知に問題が発生するものや、前庭障害、てんかん、片頭痛、スコトープ過敏症の引き金となるような動きをするものもあります。
+
+アニメーションを一時停止または無効にする機能を提供するとともに、[動きの縮減メディアクエリー](/ja/docs/Web/CSS/@media/prefers-reduced-motion)を使用して、アニメーションを使用しないことを希望するユーザーにも快適な利用環境を提供することを検討してください。
+
+## 公式定義
+
+{{CSSInfo}}
+
+## 形式文法
 
 {{csssyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
+## 例
 
-<div>
-<h3 id="Cubic-Bezier_examples">Cubic-Bezier examples</h3>
+<h3 id="Cubic-Bezier_examples">三次ベジェの例</h3>
 
-<div class="hidden">
-<pre class="brush:html">&lt;div class="parent"&gt;
-  &lt;div class="ease"&gt;ease&lt;/div&gt;
-  &lt;div class="easein"&gt;ease-in&lt;/div&gt;
-  &lt;div class="easeout"&gt;ease-out&lt;/div&gt;
-  &lt;div class="easeinout"&gt;ease-in-out&lt;/div&gt;
-  &lt;div class="linear"&gt;linear&lt;/div&gt;
-  &lt;div class="cb"&gt;cubic-bezier(0.2,-2,0.8,2)&lt;/div&gt;
-&lt;/div&gt;</pre>
+```html hidden
+<div class="parent">
+  <div class="ease">ease</div>
+  <div class="easein">ease-in</div>
+  <div class="easeout">ease-out</div>
+  <div class="easeinout">ease-in-out</div>
+  <div class="linear">linear</div>
+  <div class="cb">cubic-bezier(0.2,-2,0.8,2)</div>
+</div>
+```
 
-<pre class="brush:css;">.parent {}
-.parent &gt; div[class] {
+```css hidden
+.parent {}
+.parent > div[class] {
     width: 12em;
     min-width: 12em;
     margin-bottom: 4px;
@@ -129,7 +139,7 @@ transition-timing-function: unset;</pre>
     transition-property: all;
     transition-duration: 7s;
 }
-.parent &gt; div.box1{
+.parent > div.box1{
     width: 90vw;
     min-width: 24em;
     background-color: magenta;
@@ -138,20 +148,21 @@ transition-timing-function: unset;</pre>
     transition-property: all;
     transition-duration: 2s;
 }
-</pre>
+```
 
-<pre class="brush:js">function updateTransition() {
-  var els = document.querySelectorAll(".parent &gt; div[class]");
-  for(var c = els.length, i = 0; i &lt; c; i++) {
+```js hidden
+function updateTransition() {
+  var els = document.querySelectorAll(".parent > div[class]");
+  for(var c = els.length, i = 0; i < c; i++) {
      els[i].classList.toggle("box1");
   }
 }
 
 var intervalID = window.setInterval(updateTransition, 10000);
-</pre>
-</div>
+```
 
-<pre class="brush: css">.ease {
+```css
+.ease {
    transition-timing-function: ease;
 }
 .easein {
@@ -168,26 +179,27 @@ var intervalID = window.setInterval(updateTransition, 10000);
 }
 .cb {
    transition-timing-function: cubic-bezier(0.2,-2,0.8,2);
-}</pre>
+}
+```
 
-<div>{{EmbedLiveSample("Cubic-Bezier_examples")}}</div>
+{{EmbedLiveSample("Cubic-Bezier_examples")}}
+
+<h3 id="Step_examples">ステップの例</h3>
+
+```html hidden
+<div class="parent">
+  <div class="jump-start">jump-start</div>
+  <div class="jump-end">jump-end</div>
+  <div class="jump-both">jump-both</div>
+  <div class="jump-none">jump-none</div>
+  <div class="step-start">step-start</div>
+  <div class="step-end">step-end</div>
 </div>
+```
 
-<div>
-<h3 id="Step_examples">Step examples</h3>
-
-<div class="hidden">
-<pre class="brush:html">&lt;div class="parent"&gt;
-  &lt;div class="jump-start"&gt;jump-start&lt;/div&gt;
-  &lt;div class="jump-end"&gt;jump-end&lt;/div&gt;
-  &lt;div class="jump-both"&gt;jump-both&lt;/div&gt;
-  &lt;div class="jump-none"&gt;jump-none&lt;/div&gt;
-  &lt;div class="step-start"&gt;step-start&lt;/div&gt;
-  &lt;div class="step-end"&gt;step-end&lt;/div&gt;
-&lt;/div&gt;</pre>
-
-<pre class="brush:css;">.parent {}
-.parent &gt; div[class] {
+```css hidden
+.parent {}
+.parent > div[class] {
     width: 12em;
     min-width: 12em;
     margin-bottom: 4px;
@@ -197,7 +209,7 @@ var intervalID = window.setInterval(updateTransition, 10000);
     transition-property: all;
     transition-duration:7s;
 }
-.parent &gt; div.box1{
+.parent > div.box1{
     width: 90vw;
     min-width: 24em;
     background-color: magenta;
@@ -206,20 +218,21 @@ var intervalID = window.setInterval(updateTransition, 10000);
     transition-property: all;
     transition-duration:2s;
 }
-</pre>
+```
 
-<pre class="brush:js">function updateTransition() {
-  var els = document.querySelectorAll(".parent &gt; div[class]");
-  for(var c = els.length, i = 0; i &lt; c; i++) {
+```js hidden
+function updateTransition() {
+  var els = document.querySelectorAll(".parent > div[class]");
+  for(var c = els.length, i = 0; i < c; i++) {
      els[i].classList.toggle("box1");
   }
 }
 
 var intervalID = window.setInterval(updateTransition, 10000);
-</pre>
-</div>
+```
 
-<pre class="brush: css">.jump-start {
+```css
+.jump-start {
    transition-timing-function: steps(5, jump-start);
 }
 .jump-end {
@@ -236,49 +249,24 @@ var intervalID = window.setInterval(updateTransition, 10000);
 }
 .step-end {
    transition-timing-function: step-end;
-}</pre>
-
-<div>{{EmbedLiveSample("Step_examples")}}</div>
-</div>
-
-<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
-
-<p>Some animations can be helpful such as to guide users to understand what actions are expected, to show relationships within the user interface, and to inform users as to what actions have occurred. Animations can help reduce cognitive load, prevent change blindness, and establish better recall in spatial relationships. However, some animations can be problematic for people with cognitive concerns such as Attention Deficit Hyperactivity Disorder (ADHD) and certain kinds of motion can be a trigger for Vestibular disorders, epilepsy, and migraine and Scotopic sensitivity.</p>
-
-<p>Consider providing a mechanism for pausing or disabling animation, as well as using the <a href="/ja/docs/Web/CSS/@media/prefers-reduced-motion">Reduced Motion Media Query</a> to create a complimentary experience for users who have expressed a preference for no animated experiences.</p>
+}
+```
 
-<h2 id="Specifications" name="Specifications">仕様書</h2>
+{{EmbedLiveSample("Step_examples")}}
 
-<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-timing-function-property', 'transition-timing-function') }}</td>
-   <td>{{ Spec2('CSS3 Transitions') }}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
+## 仕様書
 
-<p>{{cssinfo}}</p>
+{{Specifications}}
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+## ブラウザーの互換性
 
-<p>{{Compat("css.properties.transition-timing-function")}}</p>
+{{Compat}}
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+## 関連情報
 
-<ul>
- <li><a href="/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions" title="CSS transition の使用">CSS transition の使用</a></li>
- <li>{{cssxref('transition')}}</li>
- <li>{{cssxref('transition-property')}}</li>
- <li>{{cssxref('transition-duration')}}</li>
- <li>{{cssxref('transition-delay')}}</li>
- <li>{{domxref("TransitionEvent")}}</li>
-</ul>
+- [CSS トランジションの使用](/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)
+- {{cssxref('transition')}}
+- {{cssxref('transition-property')}}
+- {{cssxref('transition-duration')}}
+- {{cssxref('transition-delay')}}
+- {{domxref("TransitionEvent")}}