diff --git a/adev-ja/src/content/guide/animations/overview.en.md b/adev-ja/src/content/guide/animations/overview.en.md
new file mode 100644
index 000000000..ec2ee0d7c
--- /dev/null
+++ b/adev-ja/src/content/guide/animations/overview.en.md
@@ -0,0 +1,291 @@
+# Introduction to Angular animations
+
+IMPORTANT: The `@angular/animations` package is now deprecated. The Angular team recommends using native CSS with `animate.enter` and `animate.leave` for animations for all new code. Learn more at the new enter and leave [animation guide](guide/animations). Also see [Migrating away from Angular's Animations package](guide/animations/migration) to learn how you can start migrating to pure CSS animations in your apps.
+
+Animation provides the illusion of motion: HTML elements change styling over time.
+Well-designed animations can make your application more fun and straightforward to use, but they aren't just cosmetic.
+Animations can improve your application and user experience in a number of ways:
+
+- Without animations, web page transitions can seem abrupt and jarring
+- Motion greatly enhances the user experience, so animations give users a chance to detect the application's response to their actions
+- Good animations intuitively call the user's attention to where it is needed
+
+Typically, animations involve multiple style _transformations_ over time.
+An HTML element can move, change color, grow or shrink, fade, or slide off the page.
+These changes can occur simultaneously or sequentially. You can control the timing of each transformation.
+
+Angular's animation system is built on CSS functionality, which means you can animate any property that the browser considers animatable.
+This includes positions, sizes, transforms, colors, borders, and more.
+The W3C maintains a list of animatable properties on its [CSS Transitions](https://www.w3.org/TR/css-transitions-1) page.
+
+## About this guide
+
+This guide covers the basic Angular animation features to get you started on adding Angular animations to your project.
+
+## Getting started
+
+The main Angular modules for animations are `@angular/animations` and `@angular/platform-browser`.
+
+To get started with adding Angular animations to your project, import the animation-specific modules along with standard Angular functionality.
+
+<docs-workflow>
+<docs-step title="Enabling the animations module">
+Import `provideAnimationsAsync` from `@angular/platform-browser/animations/async` and add it to the providers list in the `bootstrapApplication` function call.
+
+```ts {header: "Enabling Animations", linenums}
+bootstrapApplication(AppComponent, {
+  providers: [provideAnimationsAsync()],
+});
+```
+
+<docs-callout important title="If you need immediate animations in your application">
+  If you need to have an animation happen immediately when your application is loaded,
+  you will want to switch to the eagerly loaded animations module. Import `provideAnimations`
+  from `@angular/platform-browser/animations` instead, and use `provideAnimations` **in place of**
+  `provideAnimationsAsync` in the `bootstrapApplication` function call.
+</docs-callout>
+
+For `NgModule` based applications import `BrowserAnimationsModule`, which introduces the animation capabilities into your Angular root application module.
+
+<docs-code header="app.module.ts" path="adev/src/content/examples/animations/src/app/app.module.1.ts"/>
+</docs-step>
+<docs-step title="Importing animation functions into component files">
+If you plan to use specific animation functions in component files, import those functions from `@angular/animations`.
+
+<docs-code header="app.ts" path="adev/src/content/examples/animations/src/app/app.ts" region="imports"/>
+
+See all [available animation functions](guide/legacy-animations#animations-api-summary) at the end of this guide.
+
+</docs-step>
+<docs-step title="Adding the animation metadata property">
+In the component file, add a metadata property called `animations:` within the `@Component()` decorator.
+You put the trigger that defines an animation within the `animations` metadata property.
+
+<docs-code header="app.ts" path="adev/src/content/examples/animations/src/app/app.ts" region="decorator"/>
+</docs-step>
+</docs-workflow>
+
+## Animating a transition
+
+Let's animate a transition that changes a single HTML element from one state to another.
+For example, you can specify that a button displays either **Open** or **Closed** based on the user's last action.
+When the button is in the `open` state, it's visible and yellow.
+When it's the `closed` state, it's translucent and blue.
+
+In HTML, these attributes are set using ordinary CSS styles such as color and opacity.
+In Angular, use the `style()` function to specify a set of CSS styles for use with animations.
+Collect a set of styles in an animation state, and give the state a name, such as `open` or `closed`.
+
+HELPFUL: Let's create a new `open-close` component to animate with simple transitions.
+
+Run the following command in terminal to generate the component:
+
+```shell
+ng g component open-close
+```
+
+This will create the component at `src/app/open-close.ts`.
+
+### Animation state and styles
+
+Use Angular's [`state()`](api/animations/state) function to define different states to call at the end of each transition.
+This function takes two arguments:
+A unique name like `open` or `closed` and a `style()` function.
+
+Use the `style()` function to define a set of styles to associate with a given state name.
+You must use _camelCase_ for style attributes that contain dashes, such as `backgroundColor` or wrap them in quotes, such as `'background-color'`.
+
+Let's see how Angular's [`state()`](api/animations/state) function works with the `style⁣­(⁠)` function to set CSS style attributes.
+In this code snippet, multiple style attributes are set at the same time for the state.
+In the `open` state, the button has a height of 200 pixels, an opacity of 1, and a yellow background color.
+
+<docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/open-close.ts" region="state1"/>
+
+In the following `closed` state, the button has a height of 100 pixels, an opacity of 0.8, and a background color of blue.
+
+<docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/open-close.ts" region="state2"/>
+
+### Transitions and timing
+
+In Angular, you can set multiple styles without any animation.
+However, without further refinement, the button instantly transforms with no fade, no shrinkage, or other visible indicator that a change is occurring.
+
+To make the change less abrupt, you need to define an animation _transition_ to specify the changes that occur between one state and another over a period of time.
+The `transition()` function accepts two arguments:
+The first argument accepts an expression that defines the direction between two transition states, and the second argument accepts one or a series of `animate()` steps.
+
+Use the `animate()` function to define the length, delay, and easing of a transition, and to designate the style function for defining styles while transitions are taking place.
+Use the `animate()` function to define the `keyframes()` function for multi-step animations.
+These definitions are placed in the second argument of the `animate()` function.
+
+#### Animation metadata: duration, delay, and easing
+
+The `animate()` function \(second argument of the transition function\) accepts the `timings` and `styles` input parameters.
+
+The `timings` parameter takes either a number or a string defined in three parts.
+
+```ts
+animate(duration);
+```
+
+or
+
+```ts
+animate('duration delay easing');
+```
+
+The first part, `duration`, is required.
+The duration can be expressed in milliseconds as a number without quotes, or in seconds with quotes and a time specifier.
+For example, a duration of a tenth of a second can be expressed as follows:
+
+- As a plain number, in milliseconds:
+  `100`
+
+- In a string, as milliseconds:
+  `'100ms'`
+
+- In a string, as seconds:
+  `'0.1s'`
+
+The second argument, `delay`, has the same syntax as `duration`.
+For example:
+
+- Wait for 100ms and then run for 200ms: `'0.2s 100ms'`
+
+The third argument, `easing`, controls how the animation [accelerates and decelerates](https://easings.net) during its runtime.
+For example, `ease-in` causes the animation to begin slowly, and to pick up speed as it progresses.
+
+- Wait for 100ms, run for 200ms.
+  Use a deceleration curve to start out fast and slowly decelerate to a resting point:
+  `'0.2s 100ms ease-out'`
+
+- Run for 200ms, with no delay.
+  Use a standard curve to start slow, accelerate in the middle, and then decelerate slowly at the end:
+  `'0.2s ease-in-out'`
+
+- Start immediately, run for 200ms.
+  Use an acceleration curve to start slow and end at full velocity:
+  `'0.2s ease-in'`
+
+HELPFUL: See the Material Design website's topic on [Natural easing curves](https://material.io/design/motion/speed.html#easing) for general information on easing curves.
+
+This example provides a state transition from `open` to `closed` with a 1-second transition between states.
+
+<docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/open-close.ts" region="transition1"/>
+
+In the preceding code snippet, the `=>` operator indicates unidirectional transitions, and `<=>` is bidirectional.
+Within the transition, `animate()` specifies how long the transition takes.
+In this case, the state change from `open` to `closed` takes 1 second, expressed here as `1s`.
+
+This example adds a state transition from the `closed` state to the `open` state with a 0.5-second transition animation arc.
+
+<docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/open-close.ts" region="transition2"/>
+
+HELPFUL: Some additional notes on using styles within [`state`](api/animations/state) and `transition` functions.
+
+- Use [`state()`](api/animations/state) to define styles that are applied at the end of each transition, they persist after the animation completes
+- Use `transition()` to define intermediate styles, which create the illusion of motion during the animation
+- When animations are disabled, `transition()` styles can be skipped, but [`state()`](api/animations/state) styles can't
+- Include multiple state pairs within the same `transition()` argument:
+
+  ```ts
+  transition('on => off, off => void');
+  ```
+
+### Triggering the animation
+
+An animation requires a _trigger_, so that it knows when to start.
+The `trigger()` function collects the states and transitions, and gives the animation a name, so that you can attach it to the triggering element in the HTML template.
+
+The `trigger()` function describes the property name to watch for changes.
+When a change occurs, the trigger initiates the actions included in its definition.
+These actions can be transitions or other functions, as we'll see later on.
+
+In this example, we'll name the trigger `openClose`, and attach it to the `button` element.
+The trigger describes the open and closed states, and the timings for the two transitions.
+
+HELPFUL: Within each `trigger()` function call, an element can only be in one state at any given time.
+However, it's possible for multiple triggers to be active at once.
+
+### Defining animations and attaching them to the HTML template
+
+Animations are defined in the metadata of the component that controls the HTML element to be animated.
+Put the code that defines your animations under the `animations:` property within the `@Component()` decorator.
+
+<docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/open-close.ts" region="component"/>
+
+When you've defined an animation trigger for a component, attach it to an element in that component's template by wrapping the trigger name in brackets and preceding it with an `@` symbol.
+Then, you can bind the trigger to a template expression using standard Angular property binding syntax as shown below, where `triggerName` is the name of the trigger, and `expression` evaluates to a defined animation state.
+
+```angular-html
+<div [@triggerName]="expression">…</div>
+```
+
+The animation is executed or triggered when the expression value changes to a new state.
+
+The following code snippet binds the trigger to the value of the `isOpen` property.
+
+<docs-code header="open-close.html" path="adev/src/content/examples/animations/src/app/open-close.1.html" region="trigger"/>
+
+In this example, when the `isOpen` expression evaluates to a defined state of `open` or `closed`, it notifies the trigger `openClose` of a state change.
+Then it's up to the `openClose` code to handle the state change and kick off a state change animation.
+
+For elements entering or leaving a page \(inserted or removed from the DOM\), you can make the animations conditional.
+For example, use `*ngIf` with the animation trigger in the HTML template.
+
+HELPFUL: In the component file, set the trigger that defines the animations as the value of the `animations:` property in the `@Component()` decorator.
+
+In the HTML template file, use the trigger name to attach the defined animations to the HTML element to be animated.
+
+### Code review
+
+Here are the code files discussed in the transition example.
+
+<docs-code-multifile>
+    <docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/open-close.ts" region="component"/>
+    <docs-code header="open-close.html" path="adev/src/content/examples/animations/src/app/open-close.1.html" region="trigger"/>
+    <docs-code header="open-close.css" path="adev/src/content/examples/animations/src/app/open-close.css"/>
+</docs-code-multifile>
+
+### Summary
+
+You learned to add animation to a transition between two states, using `style()` and [`state()`](api/animations/state) along with `animate()` for the timing.
+
+Learn about more advanced features in Angular animations under the Animation section, beginning with advanced techniques in [transition and triggers](guide/legacy-animations/transition-and-triggers).
+
+## Animations API summary
+
+The functional API provided by the `@angular/animations` module provides a domain-specific language \(DSL\) for creating and controlling animations in Angular applications.
+See the [API reference](api#animations) for a complete listing and syntax details of the core functions and related data structures.
+
+| Function name                     | What it does                                                                                                                                                                                                |
+| :-------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `trigger()`                       | Kicks off the animation and serves as a container for all other animation function calls. HTML template binds to `triggerName`. Use the first argument to declare a unique trigger name. Uses array syntax. |
+| `style()`                         | Defines one or more CSS styles to use in animations. Controls the visual appearance of HTML elements during animations. Uses object syntax.                                                                 |
+| [`state()`](api/animations/state) | Creates a named set of CSS styles that should be applied on successful transition to a given state. The state can then be referenced by name within other animation functions.                              |
+| `animate()`                       | Specifies the timing information for a transition. Optional values for `delay` and `easing`. Can contain `style()` calls within.                                                                            |
+| `transition()`                    | Defines the animation sequence between two named states. Uses array syntax.                                                                                                                                 |
+| `keyframes()`                     | Allows a sequential change between styles within a specified time interval. Use within `animate()`. Can include multiple `style()` calls within each `keyframe()`. Uses array syntax.                       |
+| [`group()`](api/animations/group) | Specifies a group of animation steps \(_inner animations_\) to be run in parallel. Animation continues only after all inner animation steps have completed. Used within `sequence()` or `transition()`.     |
+| `query()`                         | Finds one or more inner HTML elements within the current element.                                                                                                                                           |
+| `sequence()`                      | Specifies a list of animation steps that are run sequentially, one by one.                                                                                                                                  |
+| `stagger()`                       | Staggers the starting time for animations for multiple elements.                                                                                                                                            |
+| `animation()`                     | Produces a reusable animation that can be invoked from elsewhere. Used together with `useAnimation()`.                                                                                                      |
+| `useAnimation()`                  | Activates a reusable animation. Used with `animation()`.                                                                                                                                                    |
+| `animateChild()`                  | Allows animations on child components to be run within the same timeframe as the parent.                                                                                                                    |
+
+</table>
+
+## More on Angular animations
+
+HELPFUL: Check out this [presentation](https://www.youtube.com/watch?v=rnTK9meY5us), shown at the AngularConnect conference in November 2017, and the accompanying [source code](https://github.com/matsko/animationsftw.in).
+
+You might also be interested in the following:
+
+<docs-pill-row>
+  <docs-pill href="guide/legacy-animations/transition-and-triggers" title="Transition and triggers"/>
+  <docs-pill href="guide/legacy-animations/complex-sequences" title="Complex animation sequences"/>
+  <docs-pill href="guide/legacy-animations/reusable-animations" title="Reusable animations"/>
+  <docs-pill href="guide/routing/route-transition-animations" title="Route transition animations"/>
+  <docs-pill href="guide/animations/migration" title="Migrating to Native CSS Animations"/>
+</docs-pill-row>
diff --git a/adev-ja/src/content/guide/animations/overview.md b/adev-ja/src/content/guide/animations/overview.md
index ec2ee0d7c..768eef56f 100644
--- a/adev-ja/src/content/guide/animations/overview.md
+++ b/adev-ja/src/content/guide/animations/overview.md
@@ -1,36 +1,36 @@
-# Introduction to Angular animations
+# Angularアニメーションの概要
 
-IMPORTANT: The `@angular/animations` package is now deprecated. The Angular team recommends using native CSS with `animate.enter` and `animate.leave` for animations for all new code. Learn more at the new enter and leave [animation guide](guide/animations). Also see [Migrating away from Angular's Animations package](guide/animations/migration) to learn how you can start migrating to pure CSS animations in your apps.
+IMPORTANT: `@angular/animations`パッケージは現在非推奨です。Angularチームは、新しく書くコードのアニメーションには`animate.enter`と`animate.leave`を使ったネイティブCSSの利用を推奨します。詳しくは、新しいenterとleaveの[アニメーションガイド](guide/animations)を参照してください。また、アプリケーションで純粋なCSSアニメーションへの移行を始める方法については、[AngularのAnimationsパッケージからの移行](guide/animations/migration)も参照してください。
 
-Animation provides the illusion of motion: HTML elements change styling over time.
-Well-designed animations can make your application more fun and straightforward to use, but they aren't just cosmetic.
-Animations can improve your application and user experience in a number of ways:
+アニメーションは動いているように見せる効果を生み出します。HTML要素のスタイルは時間の経過とともに変化します。
+適切に設計されたアニメーションは、アプリケーションをより楽しく、分かりやすく使えるようにしますが、単なる装飾ではありません。
+アニメーションは、いくつかの方法でアプリケーションとユーザー体験を向上させます。
 
-- Without animations, web page transitions can seem abrupt and jarring
-- Motion greatly enhances the user experience, so animations give users a chance to detect the application's response to their actions
-- Good animations intuitively call the user's attention to where it is needed
+- アニメーションがないと、ウェブページの遷移は唐突でぎこちなく感じられることがあります
+- モーションはユーザー体験を大きく向上させるため、アニメーションはユーザーが自分の操作に対するアプリケーションの応答を把握する機会を与えます
+- 優れたアニメーションは、必要な場所へユーザーの注意を直感的に向けます
 
-Typically, animations involve multiple style _transformations_ over time.
-An HTML element can move, change color, grow or shrink, fade, or slide off the page.
-These changes can occur simultaneously or sequentially. You can control the timing of each transformation.
+一般的に、アニメーションには時間の経過に沿った複数のスタイルの_変化_が含まれます。
+HTML要素は移動、色の変更、拡大や縮小、フェード、ページ外へのスライドができます。
+これらの変化は同時にも順番にも発生します。各変化のタイミングは制御できます。
 
-Angular's animation system is built on CSS functionality, which means you can animate any property that the browser considers animatable.
-This includes positions, sizes, transforms, colors, borders, and more.
-The W3C maintains a list of animatable properties on its [CSS Transitions](https://www.w3.org/TR/css-transitions-1) page.
+AngularのアニメーションシステムはCSSの機能の上に構築されているため、ブラウザがアニメーション可能と見なす任意のプロパティをアニメーション化できます。
+これには、位置、サイズ、transform、色、境界線などが含まれます。
+W3Cは、アニメーション可能なプロパティの一覧を[CSS Transitions](https://www.w3.org/TR/css-transitions-1)ページで管理しています。
 
-## About this guide
+## このガイドについて {#about-this-guide}
 
-This guide covers the basic Angular animation features to get you started on adding Angular animations to your project.
+このガイドでは、プロジェクトにAngularアニメーションを追加するための基本機能を紹介します。
 
-## Getting started
+## はじめに {#getting-started}
 
-The main Angular modules for animations are `@angular/animations` and `@angular/platform-browser`.
+アニメーションに関する主なAngularモジュールは`@angular/animations`と`@angular/platform-browser`です。
 
-To get started with adding Angular animations to your project, import the animation-specific modules along with standard Angular functionality.
+プロジェクトでAngularアニメーションを使い始めるには、標準のAngular機能とあわせてアニメーション専用モジュールをインポートします。
 
 <docs-workflow>
-<docs-step title="Enabling the animations module">
-Import `provideAnimationsAsync` from `@angular/platform-browser/animations/async` and add it to the providers list in the `bootstrapApplication` function call.
+<docs-step title="アニメーションモジュールを有効にする">
+`@angular/platform-browser/animations/async`から`provideAnimationsAsync`をインポートし、`bootstrapApplication`関数呼び出しのprovidersリストに追加します。
 
 ```ts {header: "Enabling Animations", linenums}
 bootstrapApplication(AppComponent, {
@@ -38,208 +38,208 @@ bootstrapApplication(AppComponent, {
 });
 ```
 
-<docs-callout important title="If you need immediate animations in your application">
-  If you need to have an animation happen immediately when your application is loaded,
-  you will want to switch to the eagerly loaded animations module. Import `provideAnimations`
-  from `@angular/platform-browser/animations` instead, and use `provideAnimations` **in place of**
-  `provideAnimationsAsync` in the `bootstrapApplication` function call.
+<docs-callout important title="アプリケーションで即時のアニメーションが必要な場合">
+  アプリケーションの読み込み直後にアニメーションを実行したい場合は、
+  即時読み込みされるアニメーションモジュールへ切り替える必要があります。代わりに`provideAnimations`
+  を`@angular/platform-browser/animations`からインポートし、`bootstrapApplication`
+  関数呼び出しでは`provideAnimationsAsync`の**代わりに**`provideAnimations`を使用します。
 </docs-callout>
 
-For `NgModule` based applications import `BrowserAnimationsModule`, which introduces the animation capabilities into your Angular root application module.
+`NgModule`ベースのアプリケーションでは、`BrowserAnimationsModule`をインポートします。これにより、アプリケーションのルートモジュールでアニメーション機能を利用できます。
 
 <docs-code header="app.module.ts" path="adev/src/content/examples/animations/src/app/app.module.1.ts"/>
 </docs-step>
-<docs-step title="Importing animation functions into component files">
-If you plan to use specific animation functions in component files, import those functions from `@angular/animations`.
+<docs-step title="コンポーネントファイルにアニメーション関数をインポートする">
+コンポーネントファイルで特定のアニメーション関数を使用する予定がある場合は、それらの関数を`@angular/animations`からインポートします。
 
 <docs-code header="app.ts" path="adev/src/content/examples/animations/src/app/app.ts" region="imports"/>
 
-See all [available animation functions](guide/legacy-animations#animations-api-summary) at the end of this guide.
+このガイドの末尾で、利用可能な[すべてのアニメーション関数](#animations-api-summary)を確認できます。
 
 </docs-step>
-<docs-step title="Adding the animation metadata property">
-In the component file, add a metadata property called `animations:` within the `@Component()` decorator.
-You put the trigger that defines an animation within the `animations` metadata property.
+<docs-step title="アニメーションメタデータプロパティを追加する">
+コンポーネントファイルで、`@Component()`デコレーター内に`animations:`というメタデータプロパティを追加します。
+アニメーションを定義するトリガーは、`animations`メタデータプロパティ内に配置します。
 
 <docs-code header="app.ts" path="adev/src/content/examples/animations/src/app/app.ts" region="decorator"/>
 </docs-step>
 </docs-workflow>
 
-## Animating a transition
+## トランジションをアニメーション化する {#animating-a-transition}
 
-Let's animate a transition that changes a single HTML element from one state to another.
-For example, you can specify that a button displays either **Open** or **Closed** based on the user's last action.
-When the button is in the `open` state, it's visible and yellow.
-When it's the `closed` state, it's translucent and blue.
+1つのHTML要素をある状態から別の状態へ変化させるトランジションを、アニメーション化してみましょう。
+たとえば、ユーザーの直前の操作に応じて、ボタンに**Open**または**Closed**のどちらかを表示するように指定できます。
+ボタンが`open`状態のときは表示され、黄色です。
+`closed`状態のときは半透明で、青色です。
 
-In HTML, these attributes are set using ordinary CSS styles such as color and opacity.
-In Angular, use the `style()` function to specify a set of CSS styles for use with animations.
-Collect a set of styles in an animation state, and give the state a name, such as `open` or `closed`.
+HTMLでは、これらの属性は色や不透明度などの通常のCSSスタイルで設定します。
+Angularでは、アニメーションで使用するCSSスタイルのセットを指定するために`style()`関数を使用します。
+スタイルのセットをアニメーション状態としてまとめ、`open`や`closed`のような名前を付けます。
 
-HELPFUL: Let's create a new `open-close` component to animate with simple transitions.
+HELPFUL: 単純なトランジションでアニメーション化する新しい`open-close`コンポーネントを作成しましょう。
 
-Run the following command in terminal to generate the component:
+コンポーネントを生成するには、ターミナルで次のコマンドを実行します:
 
 ```shell
 ng g component open-close
 ```
 
-This will create the component at `src/app/open-close.ts`.
+これにより、`src/app/open-close.ts`にコンポーネントが作成されます。
 
-### Animation state and styles
+### アニメーションの状態とスタイル {#animation-state-and-styles}
 
-Use Angular's [`state()`](api/animations/state) function to define different states to call at the end of each transition.
-This function takes two arguments:
-A unique name like `open` or `closed` and a `style()` function.
+Angularの[`state()`](api/animations/state)関数を使用して、各トランジションの終了時に適用する状態を定義します。
+この関数は2つの引数を取ります:
+`open`や`closed`のような一意の名前と、`style()`関数です。
 
-Use the `style()` function to define a set of styles to associate with a given state name.
-You must use _camelCase_ for style attributes that contain dashes, such as `backgroundColor` or wrap them in quotes, such as `'background-color'`.
+`style()`関数を使用して、指定した状態名に関連付けるスタイルのセットを定義します。
+`backgroundColor`のようにダッシュを含むスタイル属性には_camelCase_を使うか、`'background-color'`のように引用符で囲む必要があります。
 
-Let's see how Angular's [`state()`](api/animations/state) function works with the `style⁣­(⁠)` function to set CSS style attributes.
-In this code snippet, multiple style attributes are set at the same time for the state.
-In the `open` state, the button has a height of 200 pixels, an opacity of 1, and a yellow background color.
+Angularの[`state()`](api/animations/state)関数が、CSSスタイル属性を設定する`style()`関数とどのように連携するかを見てみましょう。
+このコードスニペットでは、その状態に対して複数のスタイル属性を同時に設定しています。
+`open`状態では、ボタンの高さは200ピクセル、不透明度は1、背景色は黄色です。
 
 <docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/open-close.ts" region="state1"/>
 
-In the following `closed` state, the button has a height of 100 pixels, an opacity of 0.8, and a background color of blue.
+続く`closed`状態では、ボタンの高さは100ピクセル、不透明度は0.8、背景色は青です。
 
 <docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/open-close.ts" region="state2"/>
 
-### Transitions and timing
+### トランジションとタイミング {#transitions-and-timing}
 
-In Angular, you can set multiple styles without any animation.
-However, without further refinement, the button instantly transforms with no fade, no shrinkage, or other visible indicator that a change is occurring.
+Angularでは、アニメーションなしでも複数のスタイルを設定できます。
+ただし、さらに調整しなければ、ボタンはフェードや縮小などの変化を示さないまま瞬時に変形します。
 
-To make the change less abrupt, you need to define an animation _transition_ to specify the changes that occur between one state and another over a period of time.
-The `transition()` function accepts two arguments:
-The first argument accepts an expression that defines the direction between two transition states, and the second argument accepts one or a series of `animate()` steps.
+変化をそれほど唐突にしないためには、2つの状態の間で一定時間かけて起こる変化を指定するアニメーション_トランジション_を定義する必要があります。
+`transition()`関数は2つの引数を受け取ります:
+1つ目の引数は2つのトランジション状態の方向を定義する式で、2つ目の引数は1つ以上の`animate()`ステップです。
 
-Use the `animate()` function to define the length, delay, and easing of a transition, and to designate the style function for defining styles while transitions are taking place.
-Use the `animate()` function to define the `keyframes()` function for multi-step animations.
-These definitions are placed in the second argument of the `animate()` function.
+`animate()`関数では、トランジションの長さ、遅延、イージングを定義し、トランジション中のスタイルを指定します。
+`animate()`関数を使って、複数ステップのアニメーションのための`keyframes()`関数も定義できます。
+これらの定義は、`animate()`関数の2つ目の引数に配置します。
 
-#### Animation metadata: duration, delay, and easing
+#### アニメーションメタデータ: 継続時間、遅延、イージング {#animation-metadata-duration-delay-and-easing}
 
-The `animate()` function \(second argument of the transition function\) accepts the `timings` and `styles` input parameters.
+`animate()`関数 \(トランジション関数の2つ目の引数\) は、`timings`と`styles`の入力パラメーターを受け取ります。
 
-The `timings` parameter takes either a number or a string defined in three parts.
+`timings`パラメーターは、数値または3つの部分で定義された文字列を取ります。
 
 ```ts
 animate(duration);
 ```
 
-or
+または
 
 ```ts
 animate('duration delay easing');
 ```
 
-The first part, `duration`, is required.
-The duration can be expressed in milliseconds as a number without quotes, or in seconds with quotes and a time specifier.
-For example, a duration of a tenth of a second can be expressed as follows:
+最初の部分である`duration`は必須です。
+継続時間は、引用符なしの数値でミリ秒として表すか、引用符付きで時間指定子を付けた秒として表せます。
+たとえば、10分の1秒の継続時間は次のように表せます:
 
-- As a plain number, in milliseconds:
+- 単なる数値で、ミリ秒として:
   `100`
 
-- In a string, as milliseconds:
+- 文字列で、ミリ秒として:
   `'100ms'`
 
-- In a string, as seconds:
+- 文字列で、秒として:
   `'0.1s'`
 
-The second argument, `delay`, has the same syntax as `duration`.
-For example:
+2つ目の引数`delay`は、`duration`と同じ構文です。
+例:
 
-- Wait for 100ms and then run for 200ms: `'0.2s 100ms'`
+- 100ms待ってから200ms実行する: `'0.2s 100ms'`
 
-The third argument, `easing`, controls how the animation [accelerates and decelerates](https://easings.net) during its runtime.
-For example, `ease-in` causes the animation to begin slowly, and to pick up speed as it progresses.
+3つ目の引数`easing`は、アニメーションが実行中にどのように[加速および減速するか](https://easings.net)を制御します。
+たとえば、`ease-in`はアニメーションをゆっくり開始させ、進行するにつれて速度を上げます。
 
-- Wait for 100ms, run for 200ms.
-  Use a deceleration curve to start out fast and slowly decelerate to a resting point:
+- 100ms待って、200ms実行する。
+  減速カーブを使用して高速に開始し、停止点に向かってゆっくり減速します:
   `'0.2s 100ms ease-out'`
 
-- Run for 200ms, with no delay.
-  Use a standard curve to start slow, accelerate in the middle, and then decelerate slowly at the end:
+- 200ms実行し、遅延はなし。
+  標準カーブを使用してゆっくり開始し、中盤で加速し、終盤でゆっくり減速します:
   `'0.2s ease-in-out'`
 
-- Start immediately, run for 200ms.
-  Use an acceleration curve to start slow and end at full velocity:
+- すぐに開始して、200ms実行する。
+  加速カーブを使用してゆっくり開始し、最大速度で終わります:
   `'0.2s ease-in'`
 
-HELPFUL: See the Material Design website's topic on [Natural easing curves](https://material.io/design/motion/speed.html#easing) for general information on easing curves.
+HELPFUL: イージングカーブの一般情報については、Material Designの[Natural easing curves](https://material.io/design/motion/speed.html#easing)を参照してください。
 
-This example provides a state transition from `open` to `closed` with a 1-second transition between states.
+この例では、`open`から`closed`への状態トランジションを、状態間で1秒かけて行います。
 
 <docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/open-close.ts" region="transition1"/>
 
-In the preceding code snippet, the `=>` operator indicates unidirectional transitions, and `<=>` is bidirectional.
-Within the transition, `animate()` specifies how long the transition takes.
-In this case, the state change from `open` to `closed` takes 1 second, expressed here as `1s`.
+上のコードスニペットでは、`=>`演算子は単方向トランジションを示し、`<=>`は双方向です。
+トランジション内では、`animate()`がトランジションにかかる時間を指定します。
+この場合、`open`から`closed`への状態変化は1秒で、ここでは`1s`と表現しています。
 
-This example adds a state transition from the `closed` state to the `open` state with a 0.5-second transition animation arc.
+この例では、`closed`状態から`open`状態への状態トランジションを、0.5秒のトランジションアニメーションで追加しています。
 
 <docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/open-close.ts" region="transition2"/>
 
-HELPFUL: Some additional notes on using styles within [`state`](api/animations/state) and `transition` functions.
+HELPFUL: [`state()`](api/animations/state)関数と`transition()`関数内でスタイルを使用する際の補足です。
 
-- Use [`state()`](api/animations/state) to define styles that are applied at the end of each transition, they persist after the animation completes
-- Use `transition()` to define intermediate styles, which create the illusion of motion during the animation
-- When animations are disabled, `transition()` styles can be skipped, but [`state()`](api/animations/state) styles can't
-- Include multiple state pairs within the same `transition()` argument:
+- [`state()`](api/animations/state)を使用すると、各トランジションの終了時に適用されるスタイルを定義できます。これらはアニメーション完了後も保持されます
+- `transition()`を使用すると、中間スタイルを定義でき、アニメーション中に動いているような錯覚を生み出します
+- アニメーションが無効な場合、`transition()`のスタイルはスキップされることがありますが、[`state()`](api/animations/state)のスタイルはスキップされません
+- 同じ`transition()`引数内に複数の状態ペアを含めます:
 
   ```ts
   transition('on => off, off => void');
   ```
 
-### Triggering the animation
+### アニメーションをトリガーする {#triggering-the-animation}
 
-An animation requires a _trigger_, so that it knows when to start.
-The `trigger()` function collects the states and transitions, and gives the animation a name, so that you can attach it to the triggering element in the HTML template.
+アニメーションには、いつ開始すべきかを知るための_トリガー_が必要です。
+`trigger()`関数は状態とトランジションをまとめ、アニメーションに名前を付けることで、HTMLテンプレート内の対象要素に関連付けられるようにします。
 
-The `trigger()` function describes the property name to watch for changes.
-When a change occurs, the trigger initiates the actions included in its definition.
-These actions can be transitions or other functions, as we'll see later on.
+`trigger()`関数は、変化を監視するプロパティ名を記述します。
+変化が発生すると、トリガーはその定義に含まれるアクションを開始します。
+これらのアクションは、後で見るように、トランジションやその他の関数です。
 
-In this example, we'll name the trigger `openClose`, and attach it to the `button` element.
-The trigger describes the open and closed states, and the timings for the two transitions.
+この例では、トリガーに`openClose`という名前を付け、`button`要素に関連付けます。
+トリガーは、open状態とclosed状態、および2つのトランジションのタイミングを記述します。
 
-HELPFUL: Within each `trigger()` function call, an element can only be in one state at any given time.
-However, it's possible for multiple triggers to be active at once.
+HELPFUL: 各`trigger()`関数呼び出しの中では、要素は任意の時点で1つの状態にしかなれません。
+ただし、複数のトリガーを同時にアクティブにできます。
 
-### Defining animations and attaching them to the HTML template
+### アニメーションを定義してHTMLテンプレートにアタッチする {#defining-animations-and-attaching-them-to-the-html-template}
 
-Animations are defined in the metadata of the component that controls the HTML element to be animated.
-Put the code that defines your animations under the `animations:` property within the `@Component()` decorator.
+アニメーションは、アニメーション化するHTML要素を制御するコンポーネントのメタデータで定義します。
+アニメーションを定義するコードは、`@Component()`デコレーター内の`animations:`プロパティの下に配置します。
 
 <docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/open-close.ts" region="component"/>
 
-When you've defined an animation trigger for a component, attach it to an element in that component's template by wrapping the trigger name in brackets and preceding it with an `@` symbol.
-Then, you can bind the trigger to a template expression using standard Angular property binding syntax as shown below, where `triggerName` is the name of the trigger, and `expression` evaluates to a defined animation state.
+コンポーネントのアニメーショントリガーを定義したら、そのコンポーネントのテンプレート内の要素に、トリガー名を角括弧で囲み、先頭に`@`記号を付けて関連付けます。
+その後、次に示すように、標準のAngularプロパティバインディング構文を使ってトリガーをテンプレート式にバインドできます。ここで、`triggerName`はトリガー名、`expression`は定義済みのアニメーション状態に評価されます。
 
 ```angular-html
 <div [@triggerName]="expression">…</div>
 ```
 
-The animation is executed or triggered when the expression value changes to a new state.
+式の値が新しい状態に変化すると、アニメーションが実行されます。
 
-The following code snippet binds the trigger to the value of the `isOpen` property.
+次のコードスニペットでは、トリガーを`isOpen`プロパティの値にバインドしています。
 
 <docs-code header="open-close.html" path="adev/src/content/examples/animations/src/app/open-close.1.html" region="trigger"/>
 
-In this example, when the `isOpen` expression evaluates to a defined state of `open` or `closed`, it notifies the trigger `openClose` of a state change.
-Then it's up to the `openClose` code to handle the state change and kick off a state change animation.
+この例では、`isOpen`式の値が定義済みの`open`または`closed`状態になると、トリガー`openClose`に状態変化を通知します。
+その後は、`openClose`のコードが状態変化を処理し、状態変化アニメーションを開始します。
 
-For elements entering or leaving a page \(inserted or removed from the DOM\), you can make the animations conditional.
-For example, use `*ngIf` with the animation trigger in the HTML template.
+ページに出入りする要素 \(DOMに挿入またはDOMから削除される要素\) では、アニメーションを条件付きにできます。
+たとえば、HTMLテンプレートでアニメーショントリガーと一緒に`*ngIf`を使用します。
 
-HELPFUL: In the component file, set the trigger that defines the animations as the value of the `animations:` property in the `@Component()` decorator.
+HELPFUL: コンポーネントファイルでは、アニメーションを定義するトリガーを、`@Component()`デコレーター内の`animations:`プロパティの値として設定します。
 
-In the HTML template file, use the trigger name to attach the defined animations to the HTML element to be animated.
+HTMLテンプレートファイルでは、トリガー名を使って、定義したアニメーションをアニメーション化するHTML要素に関連付けます。
 
-### Code review
+### コードレビュー {#code-review}
 
-Here are the code files discussed in the transition example.
+次のコードファイルが、トランジションの例で説明した内容です。
 
 <docs-code-multifile>
     <docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/open-close.ts" region="component"/>
@@ -247,45 +247,45 @@ Here are the code files discussed in the transition example.
     <docs-code header="open-close.css" path="adev/src/content/examples/animations/src/app/open-close.css"/>
 </docs-code-multifile>
 
-### Summary
+### まとめ {#summary}
 
-You learned to add animation to a transition between two states, using `style()` and [`state()`](api/animations/state) along with `animate()` for the timing.
+`style()`と[`state()`](api/animations/state)、およびタイミングのための`animate()`を使用して、2つの状態間のトランジションにアニメーションを追加する方法を学びました。
 
-Learn about more advanced features in Angular animations under the Animation section, beginning with advanced techniques in [transition and triggers](guide/legacy-animations/transition-and-triggers).
+より高度な機能については、[transition and triggers](guide/legacy-animations/transition-and-triggers)から読み進めてください。
 
-## Animations API summary
+## Animations APIの概要 {#animations-api-summary}
 
-The functional API provided by the `@angular/animations` module provides a domain-specific language \(DSL\) for creating and controlling animations in Angular applications.
-See the [API reference](api#animations) for a complete listing and syntax details of the core functions and related data structures.
+`@angular/animations`モジュールが提供する関数型APIは、Angularアプリケーションでアニメーションを作成および制御するためのドメイン固有言語 \(DSL\) を提供します。
+コア関数と関連データ構造の完全な一覧と構文の詳細については、[APIリファレンス](api#animations)を参照してください。
 
-| Function name                     | What it does                                                                                                                                                                                                |
-| :-------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `trigger()`                       | Kicks off the animation and serves as a container for all other animation function calls. HTML template binds to `triggerName`. Use the first argument to declare a unique trigger name. Uses array syntax. |
-| `style()`                         | Defines one or more CSS styles to use in animations. Controls the visual appearance of HTML elements during animations. Uses object syntax.                                                                 |
-| [`state()`](api/animations/state) | Creates a named set of CSS styles that should be applied on successful transition to a given state. The state can then be referenced by name within other animation functions.                              |
-| `animate()`                       | Specifies the timing information for a transition. Optional values for `delay` and `easing`. Can contain `style()` calls within.                                                                            |
-| `transition()`                    | Defines the animation sequence between two named states. Uses array syntax.                                                                                                                                 |
-| `keyframes()`                     | Allows a sequential change between styles within a specified time interval. Use within `animate()`. Can include multiple `style()` calls within each `keyframe()`. Uses array syntax.                       |
-| [`group()`](api/animations/group) | Specifies a group of animation steps \(_inner animations_\) to be run in parallel. Animation continues only after all inner animation steps have completed. Used within `sequence()` or `transition()`.     |
-| `query()`                         | Finds one or more inner HTML elements within the current element.                                                                                                                                           |
-| `sequence()`                      | Specifies a list of animation steps that are run sequentially, one by one.                                                                                                                                  |
-| `stagger()`                       | Staggers the starting time for animations for multiple elements.                                                                                                                                            |
-| `animation()`                     | Produces a reusable animation that can be invoked from elsewhere. Used together with `useAnimation()`.                                                                                                      |
-| `useAnimation()`                  | Activates a reusable animation. Used with `animation()`.                                                                                                                                                    |
-| `animateChild()`                  | Allows animations on child components to be run within the same timeframe as the parent.                                                                                                                    |
+| 関数名                           | 役割                                                                                                                                                                                                         |
+| :------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `trigger()`                      | アニメーションを開始し、他のすべてのアニメーション関数呼び出しのコンテナーとして機能します。HTMLテンプレートは`triggerName`にバインドします。最初の引数を使って一意のトリガー名を宣言します。配列構文を使用します。 |
+| `style()`                        | アニメーションで使用する1つ以上のCSSスタイルを定義します。アニメーション中のHTML要素の見た目を制御します。オブジェクト構文を使用します。                                                                   |
+| [`state()`](api/animations/state) | 指定した状態へのトランジションが成功したときに適用される、名前付きのCSSスタイルセットを作成します。この状態は、他のアニメーション関数内で名前で参照できます。                                                 |
+| `animate()`                      | トランジションのタイミング情報を指定します。`delay`と`easing`は省略可能です。内部に`style()`呼び出しを含められます。                                                                                       |
+| `transition()`                   | 2つの名前付き状態間のアニメーションシーケンスを定義します。配列構文を使用します。                                                                                                                           |
+| `keyframes()`                    | 指定した時間範囲内で順次スタイルを変化させます。`animate()`の中で使用します。各`keyframe()`の内側に複数の`style()`呼び出しを含められます。配列構文を使用します。                                            |
+| [`group()`](api/animations/group) | 並列に実行するアニメーションステップのグループ（_内側のアニメーション_）を指定します。すべての内側のアニメーションステップが完了した後でのみ、アニメーションは続行されます。`sequence()`または`transition()`内で使用します。 |
+| `query()`                        | 現在の要素の内側にある1つ以上のHTML要素を検索します。                                                                                                                                                        |
+| `sequence()`                     | 順番に1つずつ実行されるアニメーションステップのリストを指定します。                                                                                                                                          |
+| `stagger()`                      | 複数要素のアニメーション開始時刻をずらします。                                                                                                                                                                |
+| `animation()`                    | 別の場所から呼び出せる再利用可能なアニメーションを生成します。`useAnimation()`と併用します。                                                                                                                 |
+| `useAnimation()`                 | 再利用可能なアニメーションを有効化します。`animation()`と併用します。                                                                                                                                         |
+| `animateChild()`                 | 子コンポーネントのアニメーションを、親と同じ時間枠で実行できるようにします。                                                                                                                                  |
 
 </table>
 
-## More on Angular animations
+## Angularアニメーションについてさらに詳しく {#more-on-angular-animations}
 
-HELPFUL: Check out this [presentation](https://www.youtube.com/watch?v=rnTK9meY5us), shown at the AngularConnect conference in November 2017, and the accompanying [source code](https://github.com/matsko/animationsftw.in).
+HELPFUL: 2017年11月のAngularConnectカンファレンスで紹介されたこの[プレゼンテーション](https://www.youtube.com/watch?v=rnTK9meY5us)と、付属する[ソースコード](https://github.com/matsko/animationsftw.in)も確認してください。
 
-You might also be interested in the following:
+以下の項目にも興味があるかもしれません：
 
 <docs-pill-row>
-  <docs-pill href="guide/legacy-animations/transition-and-triggers" title="Transition and triggers"/>
-  <docs-pill href="guide/legacy-animations/complex-sequences" title="Complex animation sequences"/>
-  <docs-pill href="guide/legacy-animations/reusable-animations" title="Reusable animations"/>
-  <docs-pill href="guide/routing/route-transition-animations" title="Route transition animations"/>
-  <docs-pill href="guide/animations/migration" title="Migrating to Native CSS Animations"/>
+  <docs-pill href="guide/legacy-animations/transition-and-triggers" title="トランジションとトリガー"/>
+  <docs-pill href="guide/legacy-animations/complex-sequences" title="複雑なアニメーションシーケンス"/>
+  <docs-pill href="guide/legacy-animations/reusable-animations" title="再利用可能なアニメーション"/>
+  <docs-pill href="guide/routing/route-transition-animations" title="ルート遷移アニメーション"/>
+  <docs-pill href="guide/animations/migration" title="ネイティブCSSアニメーションへ移行する"/>
 </docs-pill-row>