Fix(docs) align wording in guide/animations/overview

Author: ist-h-i

adev-ja/src/content/guide/animations/overview.md

@@ -1,6 +1,6 @@
-# Angularアニメーション入門
+# Angularアニメーションの概要
 
-IMPORTANT: `@angular/animations`パッケージは現在非推奨です。Angularチームは、新しいコードのアニメーションには、ネイティブCSSと`animate.enter`および`animate.leave`を使用することを推奨しています。新しいEnter / Leaveの[アニメーションガイド](guide/animations)で詳細を確認してください。また、[AngularのAnimationsパッケージから移行する](guide/animations/migration)も参照し、アプリケーションで純粋なCSSアニメーションへの移行を開始する方法を確認してください。
+IMPORTANT: `@angular/animations`パッケージは現在非推奨です。Angularチームは、新しく書くコードのアニメーションには`animate.enter`と`animate.leave`を使ったネイティブCSSの利用を推奨します。詳しくは、新しいenterとleaveの[アニメーションガイド](guide/animations)を参照してください。また、アプリケーションで純粋なCSSアニメーションへの移行を始める方法については、[AngularのAnimationsパッケージからの移行](guide/animations/migration)も参照してください。
 
 アニメーションは動いているように見せる効果を生み出します。HTML要素のスタイルは時間の経過とともに変化します。
 適切に設計されたアニメーションは、アプリケーションをより楽しく、分かりやすく使えるようにしますが、単なる装飾ではありません。
@@ -20,13 +20,13 @@ W3Cは、アニメーション可能なプロパティの一覧を[CSS Transitio
 
 ## このガイドについて {#about-this-guide}
 
-このガイドでは、プロジェクトにAngularアニメーションを追加し始めるための基本的なAngularアニメーション機能を扱います。
+このガイドでは、プロジェクトにAngularアニメーションを追加するための基本機能を紹介します。
 
 ## はじめに {#getting-started}
 
 アニメーションに関する主なAngularモジュールは`@angular/animations`と`@angular/platform-browser`です。
 
-プロジェクトにAngularアニメーションを追加し始めるには、標準のAngular機能とあわせてアニメーション専用モジュールをインポートします。
+プロジェクトでAngularアニメーションを使い始めるには、標準のAngular機能とあわせてアニメーション専用モジュールをインポートします。
 
 <docs-workflow>
 <docs-step title="アニメーションモジュールを有効にする">
@@ -39,13 +39,13 @@ bootstrapApplication(AppComponent, {
 ```
 
 <docs-callout important title="アプリケーションで即時のアニメーションが必要な場合">
-  アプリケーションの読み込み時にすぐアニメーションを発生させたい場合は、
-  eagerに読み込まれるアニメーションモジュールへ切り替える必要があります。代わりに`provideAnimations`
+  アプリケーションの読み込み直後にアニメーションを実行したい場合は、
+  即時読み込みされるアニメーションモジュールへ切り替える必要があります。代わりに`provideAnimations`
   を`@angular/platform-browser/animations`からインポートし、`bootstrapApplication`
   関数呼び出しでは`provideAnimationsAsync`の**代わりに**`provideAnimations`を使用します。
 </docs-callout>
 
-`NgModule`ベースのアプリケーションでは、`BrowserAnimationsModule`をインポートします。これは、Angularルートアプリケーションモジュールにアニメーション機能を導入します。
+`NgModule`ベースのアプリケーションでは、`BrowserAnimationsModule`をインポートします。これにより、アプリケーションのルートモジュールでアニメーション機能を利用できます。
 
 <docs-code header="app.module.ts" path="adev/src/content/examples/animations/src/app/app.module.1.ts"/>
 </docs-step>
@@ -67,7 +67,7 @@ bootstrapApplication(AppComponent, {
 
 ## トランジションをアニメーション化する {#animating-a-transition}
 
-1つのHTML要素をある状態から別の状態へ変化させるトランジションをアニメーション化してみましょう。
+1つのHTML要素をある状態から別の状態へ変化させるトランジションを、アニメーション化してみましょう。
 たとえば、ユーザーの直前の操作に応じて、ボタンに**Open**または**Closed**のどちらかを表示するように指定できます。
 ボタンが`open`状態のときは表示され、黄色です。
 `closed`状態のときは半透明で、青色です。
@@ -88,14 +88,14 @@ ng g component open-close
 
 ### アニメーションの状態とスタイル {#animation-state-and-styles}
 
-Angularの[`state()`](api/animations/state)関数を使用して、各トランジションの最後で呼び出す異なる状態を定義します。
+Angularの[`state()`](api/animations/state)関数を使用して、各トランジションの終了時に適用する状態を定義します。
 この関数は2つの引数を取ります:
 `open`や`closed`のような一意の名前と、`style()`関数です。
 
 `style()`関数を使用して、指定した状態名に関連付けるスタイルのセットを定義します。
 `backgroundColor`のようにダッシュを含むスタイル属性には_camelCase_を使うか、`'background-color'`のように引用符で囲む必要があります。
 
-Angularの[`state()`](api/animations/state)関数が、CSSスタイル属性を設定するために`style⁣­(⁠)`関数とどのように連携するかを見てみましょう。
+Angularの[`state()`](api/animations/state)関数が、CSSスタイル属性を設定する`style()`関数とどのように連携するかを見てみましょう。
 このコードスニペットでは、その状態に対して複数のスタイル属性を同時に設定しています。
 `open`状態では、ボタンの高さは200ピクセル、不透明度は1、背景色は黄色です。
 
@@ -110,12 +110,12 @@ Angularの[`state()`](api/animations/state)関数が、CSSスタイル属性を
 Angularでは、アニメーションなしでも複数のスタイルを設定できます。
 ただし、さらに調整しなければ、ボタンはフェードや縮小などの変化を示さないまま瞬時に変形します。
 
-変化をそれほど唐突にしないためには、ある状態から別の状態へ一定時間のあいだに起こる変化を指定するアニメーション_トランジション_を定義する必要があります。
+変化をそれほど唐突にしないためには、2つの状態の間で一定時間かけて起こる変化を指定するアニメーション_トランジション_を定義する必要があります。
 `transition()`関数は2つの引数を受け取ります:
-1つ目の引数は2つのトランジション状態間の方向を定義する式、2つ目の引数は1つ以上の`animate()`ステップです。
+1つ目の引数は2つのトランジション状態の方向を定義する式で、2つ目の引数は1つ以上の`animate()`ステップです。
 
-`animate()`関数を使用して、トランジションの長さ、遅延、イージングを定義し、トランジション中のスタイルを定義する関数を指定します。
-`animate()`関数を使用して、複数ステップのアニメーションのために`keyframes()`関数を定義します。
+`animate()`関数では、トランジションの長さ、遅延、イージングを定義し、トランジション中のスタイルを指定します。
+`animate()`関数を使って、複数ステップのアニメーションのための`keyframes()`関数も定義できます。
 これらの定義は、`animate()`関数の2つ目の引数に配置します。
 
 #### アニメーションメタデータ: 継続時間、遅延、イージング {#animation-metadata-duration-delay-and-easing}
@@ -181,7 +181,7 @@ HELPFUL: イージングカーブの一般情報については、Material Desig
 
 <docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/open-close.ts" region="transition2"/>
 
-HELPFUL: [`state`](api/animations/state)関数と`transition`関数内でスタイルを使用する際の追加メモです。
+HELPFUL: [`state()`](api/animations/state)関数と`transition()`関数内でスタイルを使用する際の補足です。
 
 - [`state()`](api/animations/state)を使用すると、各トランジションの終了時に適用されるスタイルを定義できます。これらはアニメーション完了後も保持されます
 - `transition()`を使用すると、中間スタイルを定義でき、アニメーション中に動いているような錯覚を生み出します
@@ -195,13 +195,13 @@ HELPFUL: [`state`](api/animations/state)関数と`transition`関数内でスタ
 ### アニメーションをトリガーする {#triggering-the-animation}
 
 アニメーションには、いつ開始すべきかを知るための_トリガー_が必要です。
-`trigger()`関数は状態とトランジションをまとめ、アニメーションに名前を付けることで、HTMLテンプレート内のトリガー対象要素にアタッチできるようにします。
+`trigger()`関数は状態とトランジションをまとめ、アニメーションに名前を付けることで、HTMLテンプレート内の対象要素に関連付けられるようにします。
 
 `trigger()`関数は、変化を監視するプロパティ名を記述します。
 変化が発生すると、トリガーはその定義に含まれるアクションを開始します。
 これらのアクションは、後で見るように、トランジションやその他の関数です。
 
-この例では、トリガーに`openClose`という名前を付け、`button`要素にアタッチします。
+この例では、トリガーに`openClose`という名前を付け、`button`要素に関連付けます。
 トリガーは、open状態とclosed状態、および2つのトランジションのタイミングを記述します。
 
 HELPFUL: 各`trigger()`関数呼び出しの中では、要素は任意の時点で1つの状態にしかなれません。
@@ -214,32 +214,32 @@ HELPFUL: 各`trigger()`関数呼び出しの中では、要素は任意の時点
 
 <docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/open-close.ts" region="component"/>
 
-コンポーネントのアニメーショントリガーを定義したら、そのコンポーネントのテンプレート内の要素に、トリガー名を角括弧で囲み、先頭に`@`記号を付けてアタッチします。
+コンポーネントのアニメーショントリガーを定義したら、そのコンポーネントのテンプレート内の要素に、トリガー名を角括弧で囲み、先頭に`@`記号を付けて関連付けます。
 その後、次に示すように、標準のAngularプロパティバインディング構文を使ってトリガーをテンプレート式にバインドできます。ここで、`triggerName`はトリガー名、`expression`は定義済みのアニメーション状態に評価されます。
 
 ```angular-html
 <div [@triggerName]="expression">…</div>
 ```
 
-式の値が新しい状態に変化すると、アニメーションが実行、つまりトリガーされます。
+式の値が新しい状態に変化すると、アニメーションが実行されます。
 
 次のコードスニペットでは、トリガーを`isOpen`プロパティの値にバインドしています。
 
 <docs-code header="open-close.html" path="adev/src/content/examples/animations/src/app/open-close.1.html" region="trigger"/>
 
-この例では、`isOpen`式が定義済みの`open`または`closed`状態に評価されると、トリガー`openClose`に状態変化を通知します。
+この例では、`isOpen`式の値が定義済みの`open`または`closed`状態になると、トリガー`openClose`に状態変化を通知します。
 その後は、`openClose`のコードが状態変化を処理し、状態変化アニメーションを開始します。
 
 ページに出入りする要素 \(DOMに挿入またはDOMから削除される要素\) では、アニメーションを条件付きにできます。
 たとえば、HTMLテンプレートでアニメーショントリガーと一緒に`*ngIf`を使用します。
 
 HELPFUL: コンポーネントファイルでは、アニメーションを定義するトリガーを、`@Component()`デコレーター内の`animations:`プロパティの値として設定します。
 
-HTMLテンプレートファイルでは、トリガー名を使って、定義したアニメーションをアニメーション化するHTML要素にアタッチします。
+HTMLテンプレートファイルでは、トリガー名を使って、定義したアニメーションをアニメーション化するHTML要素に関連付けます。
 
 ### コードレビュー {#code-review}
 
-ここでは、トランジションの例で説明したコードファイルを示します。
+次のコードファイルが、トランジションの例で説明した内容です。
 
 <docs-code-multifile>
     <docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/open-close.ts" region="component"/>
@@ -251,7 +251,7 @@ HTMLテンプレートファイルでは、トリガー名を使って、定義
 
 `style()`と[`state()`](api/animations/state)、およびタイミングのための`animate()`を使用して、2つの状態間のトランジションにアニメーションを追加する方法を学びました。
 
-[transition and triggers](guide/animations/transition-and-triggers)の高度なテクニックから始めて、AnimationセクションでAngularアニメーションのより高度な機能を学んでください。
+より高度な機能については、[transition and triggers](guide/animations/transition-and-triggers)から読み進めてください。
 
 ## Animations APIの概要 {#animations-api-summary}