diff --git a/adev-ja/src/content/guide/animations/migration.en.md b/adev-ja/src/content/guide/animations/migration.en.md
new file mode 100644
index 000000000..e3a3e8dff
--- /dev/null
+++ b/adev-ja/src/content/guide/animations/migration.en.md
@@ -0,0 +1,280 @@
+# Migrating away from Angular's Animations package
+
+The `@angular/animations` package is deprecated as of v20.2, which also introduced the new `animate.enter` and `animate.leave` feature to add animations to your application. Using these new features, you can replace all animations based on `@angular/animations` with plain CSS or JS animation libraries. Removing `@angular/animations` from your application can significantly reduce the size of your JavaScript bundle. Native CSS animations generally offer superior performance, as they can benefit from hardware acceleration. This guide walks through the process of refactoring your code from `@angular/animations` to native CSS animations.
+
+## How to write animations in native CSS
+
+If you've never written any native CSS animations, there are a number of excellent guides to get you started. Here's a few of them:
+[MDN's CSS Animations guide](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations)
+[W3Schools CSS3 Animations guide](https://www.w3schools.com/css/css3_animations.asp)
+[The Complete CSS Animations Tutorial](https://www.lambdatest.com/blog/css-animations-tutorial/)
+[CSS Animation for Beginners](https://thoughtbot.com/blog/css-animation-for-beginners)
+
+and a couple of videos:
+[Learn CSS Animation in 9 Minutes](https://www.youtube.com/watch?v=z2LQYsZhsFw)
+[Net Ninja CSS Animation Tutorial Playlist](https://www.youtube.com/watch?v=jgw82b5Y2MU&list=PL4cUxeGkcC9iGYgmEd2dm3zAKzyCGDtM5)
+
+Check some of these various guides and tutorials out, and then come back to this guide.
+
+## Creating Reusable Animations
+
+Just like with the animations package, you can create reusable animations that can be shared across your application. The animations package version of this had you using the `animation()` function in a shared typescript file. The native CSS version of this is similar, but lives in a shared CSS file.
+
+#### With Animations Package
+
+
+
+#### With Native CSS
+
+
+
+Adding the class `animated-class` to an element would trigger the animation on that element.
+
+## Animating a Transition
+
+### Animating State and Styles
+
+The animations package allowed you to define various states using the [`state()`](api/animations/state) function within a component. Examples might be an `open` or `closed` state containing the styles for each respective state within the definition. For example:
+
+#### With Animations Package
+
+
+
+This same behavior can be accomplished natively by using CSS classes either using a keyframe animation or transition styling.
+
+#### With Native CSS
+
+
+
+Triggering the `open` or `closed` state is done by toggling classes on the element in your component. You can find examples of how to do this in our [template guide](guide/templates/binding#css-class-and-style-property-bindings).
+
+You can see similar examples in the template guide for [animating styles directly](guide/templates/binding#css-style-properties).
+
+### Transitions, Timing, and Easing
+
+The animations package `animate()` function allows for providing timing, like duration, delays and easing. This can be done natively with CSS using several css properties or shorthand properties.
+
+Specify `animation-duration`, `animation-delay`, and `animation-timing-function` for a keyframe animation in CSS, or alternatively use the `animation` shorthand property.
+
+
+
+Similarly, you can use `transition-duration`, `transition-delay`, and `transition-timing-function` and the `transition` shorthand for animations that are not using `@keyframes`.
+
+
+
+### Triggering an Animation
+
+The animations package required specifying triggers using the `trigger()` function and nesting all of your states within it. With native CSS, this is unnecessary. Animations can be triggered by toggling CSS styles or classes. Once a class is present on an element, the animation will occur. Removing the class will revert the element back to whatever CSS is defined for that element. This results in significantly less code to do the same animation. Here's an example:
+
+#### With Animations Package
+
+
+
+
+
+
+
+#### With Native CSS
+
+
+
+
+
+
+
+## Transition and Triggers
+
+### Predefined State and wildcard matching
+
+The animations package offers the ability to match your defined states to a transition via strings. For example, animating from open to closed would be `open => closed`. You can use wildcards to match any state to a target state, like `* => closed` and the `void` keyword can be used for entering and exiting states. For example: `* => void` for when an element leaves a view or `void => *` for when the element enters a view.
+
+These state matching patterns are not needed at all when animating with CSS directly. You can manage what transitions and `@keyframes` animations apply based on whatever classes you set and / or styles you set on the elements. You can also add `@starting-style` to control how the element looks upon immediately entering the DOM.
+
+### Automatic Property Calculation with Wildcards
+
+The animations package offers the ability to animate things that have been historically difficult to animate, like animating a set height to `height: auto`. You can now do this with pure CSS as well.
+
+#### With Animations Package
+
+
+
+
+
+
+
+You can use css-grid to animate to auto height.
+
+#### With Native CSS
+
+
+
+
+
+
+
+If you don't have to worry about supporting all browsers, you can also check out `calc-size()`, which is the true solution to animating auto height. See [MDN's docs](https://developer.mozilla.org/en-US/docs/Web/CSS/calc-size) and (this tutorial)[https://frontendmasters.com/blog/one-of-the-boss-battles-of-css-is-almost-won-transitioning-to-auto/] for more information.
+
+### Animate entering and leaving a view
+
+The animations package offered the previously mentioned pattern matching for entering and leaving but also included the shorthand aliases of `:enter` and `:leave`.
+
+#### With Animations Package
+
+
+
+
+
+
+
+#### With Native CSS
+
+
+
+
+
+
+
+#### With Native CSS
+
+
+
+
+
+
+
+For more information on `animate.enter` and `animate.leave`, see the [Enter and Leave animations guide](guide/animations).
+
+### Animating increment and decrement
+
+Along with the aforementioned `:enter` and `:leave`, there's also `:increment` and `:decrement`. You can animate these also by adding and removing classes. Unlike the animation package built-in aliases, there is no automatic application of classes when the values go up or down. You can apply the appropriate classes programmatically. Here's an example:
+
+#### With Animations Package
+
+
+
+
+
+
+
+#### With Native CSS
+
+
+
+
+
+
+
+### Parent / Child Animations
+
+Unlike the animations package, when multiple animations are specified within a given component, no animation has priority over another and nothing blocks any animation from firing. Any sequencing of animations would have to be handled by your definition of your CSS animation, using animation / transition delay, and / or using `animationend` or `transitionend` to handle adding the next css to be animated.
+
+### Disabling an animation or all animations
+
+With native CSS animations, if you'd like to disable the animations that you've specified, you have multiple options.
+
+1. Create a custom class that forces animation and transition to `none`.
+
+```css
+.no-animation {
+ animation: none !important;
+ transition: none !important;
+}
+```
+
+Applying this class to an element prevents any animation from firing on that element. You could alternatively scope this to your entire DOM or section of your DOM to enforce this behavior. However, this prevents animation events from firing. If you are awaiting animation events for element removal, this solution won't work. A workaround is to set durations to 1 millisecond instead.
+
+2. Use the [`prefers-reduced-motion`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) media query to ensure no animations play for users that prefer less animation.
+
+3. Prevent adding animation classes programatically
+
+### Animation Callbacks
+
+The animations package exposed callbacks for you to use in the case that you want to do something when the animation has finished. Native CSS animations also have these callbacks.
+
+[`OnAnimationStart`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationstart_event)
+[`OnAnimationEnd`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationend_event)
+[`OnAnimationIteration`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationitration_event)
+[`OnAnimationCancel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationcancel_event)
+
+[`OnTransitionStart`](https://developer.mozilla.org/en-US/docs/Web/API/Element/transitionstart_event)
+[`OnTransitionRun`](https://developer.mozilla.org/en-US/docs/Web/API/Element/transitionrun_event)
+[`OnTransitionEnd`](https://developer.mozilla.org/en-US/docs/Web/API/Element/transitionend_event)
+[`OnTransitionCancel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/transitioncancel_event)
+
+The Web Animations API has a lot of additional functionality. [Take a look at the documentation](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API) to see all the available animation APIs.
+
+NOTE: Be aware of bubbling issues with these callbacks. If you are animating children and parents, the events bubble up from children to parents. Consider stopping propagation or looking at more details within the event to determine if you're responding to the desired event target rather than an event bubbling up from a child node. You can examine the `animationname` property or the properties being transitioned to verify you have the right nodes.
+
+## Complex Sequences
+
+The animations package has built-in functionality for creating complex sequences. These sequences are all entirely possible without the animations package.
+
+### Targeting specific elements
+
+In the animations package, you could target specific elements by using the `query()` function to find specific elements by a CSS class name, similar to [`document.querySelector()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector). This is unnecessary in a native CSS animation world. Instead, you can use your CSS selectors to target sub-classes and apply any desired `transform` or `animation`.
+
+To toggle classes for child nodes within a template, you can use class and style bindings to add the animations at the right points.
+
+### Stagger()
+
+The `stagger()` function allowed you to delay the animation of each item in a list of items by a specified time to create a cascade effect. You can replicate this behavior in native CSS by utilizing `animation-delay` or `transition-delay`. Here is an example of what that CSS might look like.
+
+#### With Animations Package
+
+
+
+
+
+
+
+#### With Native CSS
+
+
+
+
+
+
+
+### Parallel Animations
+
+The animations package has a `group()` function to play multiple animations at the same time. In CSS, you have full control over animation timing. If you have multiple animations defined, you can apply all of them at once.
+
+```css
+.target-element {
+ animation:
+ rotate 3s,
+ fade-in 2s;
+}
+```
+
+In this example, the `rotate` and `fade-in` animations fire at the same time.
+
+### Animating the items of a reordering list
+
+Items reordering in a list works out of the box using the previously described techniques. No additional special work is required. Items in a `@for` loop will be removed and re-added properly, which will fire off animations using `@starting-styles` for entry animations. Alternatively, you can use `animate.enter` for this same behavior. Use `animate.leave` to animate elements as they are removed, as seen in the example above.
+
+#### With Animations Package
+
+
+
+
+
+
+
+#### With Native CSS
+
+
+
+
+
+
+
+## Migrating usages of AnimationPlayer
+
+The `AnimationPlayer` class allows access to an animation to do more advanced things like pause, play, restart, and finish an animation through code. All of these things can be handled natively as well.
+
+You can retrieve animations off an element directly using [`Element.getAnimations()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getAnimations). This returns an array of every [`Animation`](https://developer.mozilla.org/en-US/docs/Web/API/Animation) on that element. You can use the `Animation` API to do much more than you could with what the `AnimationPlayer` from the animations package offered. From here you can `cancel()`, `play()`, `pause()`, `reverse()` and much more. This native API should provide everything you need to control your animations.
+
+## Route Transitions
+
+You can use view transitions to animate between routes. See the [Route Transition Animations Guide](guide/routing/route-transition-animations) to get started.
diff --git a/adev-ja/src/content/guide/animations/migration.md b/adev-ja/src/content/guide/animations/migration.md
index e3a3e8dff..73cfc0bae 100644
--- a/adev-ja/src/content/guide/animations/migration.md
+++ b/adev-ja/src/content/guide/animations/migration.md
@@ -1,72 +1,72 @@
-# Migrating away from Angular's Animations package
+# AngularのAnimationsパッケージから移行する
-The `@angular/animations` package is deprecated as of v20.2, which also introduced the new `animate.enter` and `animate.leave` feature to add animations to your application. Using these new features, you can replace all animations based on `@angular/animations` with plain CSS or JS animation libraries. Removing `@angular/animations` from your application can significantly reduce the size of your JavaScript bundle. Native CSS animations generally offer superior performance, as they can benefit from hardware acceleration. This guide walks through the process of refactoring your code from `@angular/animations` to native CSS animations.
+v20.2以降、`@angular/animations`パッケージは非推奨になり、同時にアプリケーションへアニメーションを追加するための新しい`animate.enter`および`animate.leave`機能が導入されました。これらの新機能を使うと、`@angular/animations`ベースのアニメーションをすべて、プレーンなCSSまたはJSアニメーションライブラリで置き換えられます。アプリケーションから`@angular/animations`を削除すると、JavaScriptバンドルのサイズを大幅に削減できます。ネイティブCSSアニメーションは、ハードウェアアクセラレーションの恩恵を受けられるため、一般により優れたパフォーマンスを発揮します。このガイドでは、`@angular/animations`からネイティブCSSアニメーションへコードをリファクタリングする手順を説明します。
-## How to write animations in native CSS
+## ネイティブCSSでアニメーションを書く方法 {#how-to-write-animations-in-native-css}
-If you've never written any native CSS animations, there are a number of excellent guides to get you started. Here's a few of them:
-[MDN's CSS Animations guide](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations)
-[W3Schools CSS3 Animations guide](https://www.w3schools.com/css/css3_animations.asp)
-[The Complete CSS Animations Tutorial](https://www.lambdatest.com/blog/css-animations-tutorial/)
-[CSS Animation for Beginners](https://thoughtbot.com/blog/css-animation-for-beginners)
+ネイティブCSSでアニメーションを書いたことがない場合は、入門に役立つ優れたガイドがいくつもあります。以下にいくつか紹介します。
+[MDNのCSSアニメーションガイド](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations)
+[W3SchoolsのCSS3アニメーションガイド](https://www.w3schools.com/css/css3_animations.asp)
+[CSSアニメーションの完全チュートリアル](https://www.lambdatest.com/blog/css-animations-tutorial/)
+[初心者向けCSSアニメーション](https://thoughtbot.com/blog/css-animation-for-beginners)
-and a couple of videos:
-[Learn CSS Animation in 9 Minutes](https://www.youtube.com/watch?v=z2LQYsZhsFw)
-[Net Ninja CSS Animation Tutorial Playlist](https://www.youtube.com/watch?v=jgw82b5Y2MU&list=PL4cUxeGkcC9iGYgmEd2dm3zAKzyCGDtM5)
+また、次の動画も参考にしてください。
+[9分でCSSアニメーションを学ぶ](https://www.youtube.com/watch?v=z2LQYsZhsFw)
+[Net NinjaのCSSアニメーションチュートリアル再生リスト](https://www.youtube.com/watch?v=jgw82b5Y2MU&list=PL4cUxeGkcC9iGYgmEd2dm3zAKzyCGDtM5)
-Check some of these various guides and tutorials out, and then come back to this guide.
+まずは、これらのガイドやチュートリアルに目を通し、その後にこのガイドへ戻ってきてください。
-## Creating Reusable Animations
+## 再利用可能なアニメーションを作成する {#creating-reusable-animations}
-Just like with the animations package, you can create reusable animations that can be shared across your application. The animations package version of this had you using the `animation()` function in a shared typescript file. The native CSS version of this is similar, but lives in a shared CSS file.
+アニメーションパッケージと同様に、アプリケーション全体で共有できる再利用可能なアニメーションを作成できます。アニメーションパッケージでは共有のTypeScriptファイルで`animation()`関数を使っていましたが、ネイティブCSSでも考え方は似ており、共有のCSSファイルに定義します。
-#### With Animations Package
+#### Animationsパッケージの場合
-#### With Native CSS
+#### ネイティブCSSの場合
-Adding the class `animated-class` to an element would trigger the animation on that element.
+要素に`animated-class`クラスを追加すると、その要素でアニメーションがトリガーされます。
-## Animating a Transition
+## トランジションをアニメーション化する {#animating-a-transition}
-### Animating State and Styles
+### 状態とスタイルをアニメーション化する {#animating-state-and-styles}
-The animations package allowed you to define various states using the [`state()`](api/animations/state) function within a component. Examples might be an `open` or `closed` state containing the styles for each respective state within the definition. For example:
+アニメーションパッケージでは、コンポーネント内で[`state()`](api/animations/state)関数を使ってさまざまな状態を定義できました。たとえば、定義の中にそれぞれの状態に対応するスタイルを含む`open`や`closed`といった状態です。例を示します。
-#### With Animations Package
+#### Animationsパッケージの場合
-This same behavior can be accomplished natively by using CSS classes either using a keyframe animation or transition styling.
+この動作は、キーフレームアニメーションまたはトランジションスタイルとCSSクラスを使うことで、ネイティブにも実現できます。
-#### With Native CSS
+#### ネイティブCSSの場合
-Triggering the `open` or `closed` state is done by toggling classes on the element in your component. You can find examples of how to do this in our [template guide](guide/templates/binding#css-class-and-style-property-bindings).
+`open`または`closed`状態のトリガーは、コンポーネント内で要素のクラスを切り替えて行います。例は、[テンプレートガイド](guide/templates/binding#css-class-and-style-property-bindings)で確認できます。
-You can see similar examples in the template guide for [animating styles directly](guide/templates/binding#css-style-properties).
+同様の例として、テンプレートガイドの[スタイルを直接アニメーション化する](guide/templates/binding#css-style-properties)も参照してください。
-### Transitions, Timing, and Easing
+### トランジション、タイミング、イージング {#transitions-timing-and-easing}
-The animations package `animate()` function allows for providing timing, like duration, delays and easing. This can be done natively with CSS using several css properties or shorthand properties.
+アニメーションパッケージの`animate()`関数では、継続時間や遅延、イージングといったタイミングを指定できました。これはネイティブでも、複数のCSSプロパティまたはショートハンドプロパティを使って実現できます。
-Specify `animation-duration`, `animation-delay`, and `animation-timing-function` for a keyframe animation in CSS, or alternatively use the `animation` shorthand property.
+キーフレームアニメーションでは、`animation-duration`、`animation-delay`、`animation-timing-function`を指定するか、代わりに`animation`ショートハンドプロパティを使用します。
-Similarly, you can use `transition-duration`, `transition-delay`, and `transition-timing-function` and the `transition` shorthand for animations that are not using `@keyframes`.
+同様に、`@keyframes`を使用しないアニメーションでは、`transition-duration`、`transition-delay`、`transition-timing-function`、および`transition`ショートハンドを使用できます。
-### Triggering an Animation
+### アニメーションをトリガーする {#triggering-an-animation}
-The animations package required specifying triggers using the `trigger()` function and nesting all of your states within it. With native CSS, this is unnecessary. Animations can be triggered by toggling CSS styles or classes. Once a class is present on an element, the animation will occur. Removing the class will revert the element back to whatever CSS is defined for that element. This results in significantly less code to do the same animation. Here's an example:
+アニメーションパッケージでは、`trigger()`関数を使ってトリガーを指定し、その中にすべての状態をネストする必要がありました。ネイティブCSSでは、これは不要です。CSSのスタイルやクラスを切り替えるだけでアニメーションをトリガーできます。要素にクラスが存在するとアニメーションが実行され、クラスを削除すると、その要素に定義されているCSSへ戻ります。これにより、同じアニメーションをはるかに少ないコードで実現できます。例を示します。
-#### With Animations Package
+#### Animationsパッケージの場合
@@ -74,7 +74,7 @@ The animations package required specifying triggers using the `trigger()` functi
-#### With Native CSS
+#### ネイティブCSSの場合
@@ -82,19 +82,19 @@ The animations package required specifying triggers using the `trigger()` functi
-## Transition and Triggers
+## トランジションとトリガー {#transition-and-triggers}
-### Predefined State and wildcard matching
+### 事前定義された状態とワイルドカードマッチング {#predefined-state-and-wildcard-matching}
-The animations package offers the ability to match your defined states to a transition via strings. For example, animating from open to closed would be `open => closed`. You can use wildcards to match any state to a target state, like `* => closed` and the `void` keyword can be used for entering and exiting states. For example: `* => void` for when an element leaves a view or `void => *` for when the element enters a view.
+アニメーションパッケージでは、文字列を使って定義済みの状態をトランジションに対応付けられます。たとえば、openからclosedへのアニメーションは`open => closed`となります。ワイルドカードを使うと任意の状態から対象状態へのマッチングができ、`* => closed`のように書けます。また、`void`キーワードはenterおよびexitの状態に使えます。たとえば、要素がビューを離れるときは`* => void`、要素がビューに入るときは`void => *`です。
-These state matching patterns are not needed at all when animating with CSS directly. You can manage what transitions and `@keyframes` animations apply based on whatever classes you set and / or styles you set on the elements. You can also add `@starting-style` to control how the element looks upon immediately entering the DOM.
+CSSで直接アニメーション化する場合、こうした状態マッチングパターンはまったく不要です。要素に設定するクラスやスタイルに応じて、どのトランジションや`@keyframes`アニメーションを適用するかを管理できます。DOMに入った直後の要素の見た目を制御するために`@starting-style`を追加できます。
-### Automatic Property Calculation with Wildcards
+### ワイルドカードによる自動プロパティ計算 {#automatic-property-calculation-with-wildcards}
-The animations package offers the ability to animate things that have been historically difficult to animate, like animating a set height to `height: auto`. You can now do this with pure CSS as well.
+アニメーションパッケージでは、固定した高さから`height: auto`へのアニメーションのように、従来は難しかったアニメーションを実現できました。これは現在では純粋なCSSでも可能です。
-#### With Animations Package
+#### Animationsパッケージの場合
@@ -102,9 +102,9 @@ The animations package offers the ability to animate things that have been histo
-You can use css-grid to animate to auto height.
+CSS Gridを使うと、height: autoへのアニメーションを実現できます。
-#### With Native CSS
+#### ネイティブCSSの場合
@@ -112,13 +112,13 @@ You can use css-grid to animate to auto height.
-If you don't have to worry about supporting all browsers, you can also check out `calc-size()`, which is the true solution to animating auto height. See [MDN's docs](https://developer.mozilla.org/en-US/docs/Web/CSS/calc-size) and (this tutorial)[https://frontendmasters.com/blog/one-of-the-boss-battles-of-css-is-almost-won-transitioning-to-auto/] for more information.
+すべてのブラウザをサポートする必要がない場合は、height: autoをアニメーション化するための本命の解決策である`calc-size()`も確認してください。詳しくは、[MDNのドキュメント](https://developer.mozilla.org/en-US/docs/Web/CSS/calc-size)と[このチュートリアル](https://frontendmasters.com/blog/one-of-the-boss-battles-of-css-is-almost-won-transitioning-to-auto/)を参照してください。
-### Animate entering and leaving a view
+### ビューへの出入りをアニメーション化する {#animate-entering-and-leaving-a-view}
-The animations package offered the previously mentioned pattern matching for entering and leaving but also included the shorthand aliases of `:enter` and `:leave`.
+アニメーションパッケージでは、前述のenterとleaveのパターンマッチングに加えて、`:enter`と`:leave`というショートハンドエイリアスも提供していました。
-#### With Animations Package
+#### Animationsパッケージの場合
@@ -126,7 +126,7 @@ The animations package offered the previously mentioned pattern matching for ent
-#### With Native CSS
+#### ネイティブCSSの場合
@@ -134,7 +134,7 @@ The animations package offered the previously mentioned pattern matching for ent
-#### With Native CSS
+#### ネイティブCSSの場合
@@ -142,13 +142,13 @@ The animations package offered the previously mentioned pattern matching for ent
-For more information on `animate.enter` and `animate.leave`, see the [Enter and Leave animations guide](guide/animations).
+`animate.enter`と`animate.leave`について詳しくは、[EnterとLeaveのアニメーションガイド](guide/animations)を参照してください。
-### Animating increment and decrement
+### インクリメントとデクリメントをアニメーション化する {#animating-increment-and-decrement}
-Along with the aforementioned `:enter` and `:leave`, there's also `:increment` and `:decrement`. You can animate these also by adding and removing classes. Unlike the animation package built-in aliases, there is no automatic application of classes when the values go up or down. You can apply the appropriate classes programmatically. Here's an example:
+前述の`:enter`と`:leave`に加えて、`:increment`と`:decrement`もあります。これらもクラスを追加・削除することでアニメーションできます。アニメーションパッケージの組み込みエイリアスとは異なり、値が増減したときにクラスが自動で適用されるわけではありません。適切なクラスをプログラムから付与できます。例を示します。
-#### With Animations Package
+#### Animationsパッケージの場合
@@ -156,7 +156,7 @@ Along with the aforementioned `:enter` and `:leave`, there's also `:increment` a
-#### With Native CSS
+#### ネイティブCSSの場合
@@ -164,15 +164,15 @@ Along with the aforementioned `:enter` and `:leave`, there's also `:increment` a
-### Parent / Child Animations
+### 親子アニメーション {#parent-child-animations}
-Unlike the animations package, when multiple animations are specified within a given component, no animation has priority over another and nothing blocks any animation from firing. Any sequencing of animations would have to be handled by your definition of your CSS animation, using animation / transition delay, and / or using `animationend` or `transitionend` to handle adding the next css to be animated.
+アニメーションパッケージとは異なり、あるコンポーネント内に複数のアニメーションを指定しても、どのアニメーションも他より優先されず、どのアニメーションの発火もブロックされません。アニメーションの順序付けは、animationやtransitionの遅延を使ったCSSアニメーション定義、あるいは次にアニメーションさせるCSSを追加するための`animationend`または`transitionend`によって処理する必要があります。
-### Disabling an animation or all animations
+### アニメーションまたはすべてのアニメーションを無効にする {#disabling-an-animation-or-all-animations}
-With native CSS animations, if you'd like to disable the animations that you've specified, you have multiple options.
+ネイティブCSSアニメーションでは、指定したアニメーションを無効にしたい場合、複数の選択肢があります。
-1. Create a custom class that forces animation and transition to `none`.
+1. animationとtransitionを`none`に強制するカスタムクラスを作成します。
```css
.no-animation {
@@ -181,19 +181,19 @@ With native CSS animations, if you'd like to disable the animations that you've
}
```
-Applying this class to an element prevents any animation from firing on that element. You could alternatively scope this to your entire DOM or section of your DOM to enforce this behavior. However, this prevents animation events from firing. If you are awaiting animation events for element removal, this solution won't work. A workaround is to set durations to 1 millisecond instead.
+このクラスを要素に適用すると、その要素ではどのアニメーションも発火しなくなります。代わりにDOM全体またはDOMの一部にスコープして、この挙動を強制できます。ただし、この方法ではアニメーションイベントが発火しなくなります。要素削除のためにアニメーションイベントを待っている場合、この方法は機能しません。回避策としては、継続時間を1ミリ秒に設定します。
-2. Use the [`prefers-reduced-motion`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) media query to ensure no animations play for users that prefer less animation.
+2. [`prefers-reduced-motion`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion)メディアクエリを使用して、アニメーションを控えたいユーザーにはアニメーションを再生しないようにします。
-3. Prevent adding animation classes programatically
+3. プログラムからアニメーションクラスを追加しないようにします。
-### Animation Callbacks
+### アニメーションのコールバック {#animation-callbacks}
-The animations package exposed callbacks for you to use in the case that you want to do something when the animation has finished. Native CSS animations also have these callbacks.
+アニメーションパッケージは、アニメーション終了時に何かをしたい場合に使用できるコールバックを公開していました。ネイティブCSSアニメーションにも同様のコールバックがあります。
[`OnAnimationStart`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationstart_event)
[`OnAnimationEnd`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationend_event)
-[`OnAnimationIteration`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationitration_event)
+[`OnAnimationIteration`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationiteration_event)
[`OnAnimationCancel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationcancel_event)
[`OnTransitionStart`](https://developer.mozilla.org/en-US/docs/Web/API/Element/transitionstart_event)
@@ -201,25 +201,25 @@ The animations package exposed callbacks for you to use in the case that you wan
[`OnTransitionEnd`](https://developer.mozilla.org/en-US/docs/Web/API/Element/transitionend_event)
[`OnTransitionCancel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/transitioncancel_event)
-The Web Animations API has a lot of additional functionality. [Take a look at the documentation](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API) to see all the available animation APIs.
+Web Animations APIには、他にも多くの機能があります。利用できるすべてのアニメーションAPIについては、[ドキュメント](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API)を参照してください。
-NOTE: Be aware of bubbling issues with these callbacks. If you are animating children and parents, the events bubble up from children to parents. Consider stopping propagation or looking at more details within the event to determine if you're responding to the desired event target rather than an event bubbling up from a child node. You can examine the `animationname` property or the properties being transitioned to verify you have the right nodes.
+NOTE: これらのコールバックではバブリングの問題に注意してください。子要素と親要素の両方をアニメーション化している場合、イベントは子要素から親要素へバブルアップします。子ノードからバブルしてきたイベントではなく、意図したイベントターゲットに応答しているかを判断するために、伝播を停止するか、イベントの詳細を確認してください。適切なノードを対象にしているかは、`animationname`プロパティやトランジション対象のプロパティを調べることで確認できます。
-## Complex Sequences
+## 複雑なシーケンス {#complex-sequences}
-The animations package has built-in functionality for creating complex sequences. These sequences are all entirely possible without the animations package.
+アニメーションパッケージには、複雑なシーケンスを作成するための組み込み機能がありました。これらのシーケンスはどれも、アニメーションパッケージなしで十分に実現できます。
-### Targeting specific elements
+### 特定の要素を対象にする {#targeting-specific-elements}
-In the animations package, you could target specific elements by using the `query()` function to find specific elements by a CSS class name, similar to [`document.querySelector()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector). This is unnecessary in a native CSS animation world. Instead, you can use your CSS selectors to target sub-classes and apply any desired `transform` or `animation`.
+アニメーションパッケージでは、[`document.querySelector()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector)に似た`query()`関数を使って、CSSクラス名で特定の要素を見つけて対象にできました。ネイティブCSSアニメーションでは、これは不要です。代わりにCSSセレクターを使ってサブクラスを対象にし、必要な`transform`や`animation`を適用できます。
-To toggle classes for child nodes within a template, you can use class and style bindings to add the animations at the right points.
+テンプレート内の子ノードのクラスを切り替えるには、クラスバインディングとスタイルバインディングを使って、適切なタイミングでアニメーションを追加できます。
-### Stagger()
+### stagger() {#stagger}
-The `stagger()` function allowed you to delay the animation of each item in a list of items by a specified time to create a cascade effect. You can replicate this behavior in native CSS by utilizing `animation-delay` or `transition-delay`. Here is an example of what that CSS might look like.
+`stagger()`関数では、指定した時間だけリスト内の各項目のアニメーションを遅らせて、カスケード効果を作成できました。この挙動は、ネイティブCSSでも`animation-delay`または`transition-delay`を利用して再現できます。以下はそのCSSの例です。
-#### With Animations Package
+#### Animationsパッケージの場合
@@ -227,7 +227,7 @@ The `stagger()` function allowed you to delay the animation of each item in a li
-#### With Native CSS
+#### ネイティブCSSの場合
@@ -235,9 +235,9 @@ The `stagger()` function allowed you to delay the animation of each item in a li
-### Parallel Animations
+### 並行アニメーション {#parallel-animations}
-The animations package has a `group()` function to play multiple animations at the same time. In CSS, you have full control over animation timing. If you have multiple animations defined, you can apply all of them at once.
+アニメーションパッケージには、複数のアニメーションを同時に再生する`group()`関数がありました。CSSでは、アニメーションのタイミングを完全に制御できます。複数のアニメーションを定義している場合は、それらを一度にすべて適用できます。
```css
.target-element {
@@ -247,13 +247,13 @@ The animations package has a `group()` function to play multiple animations at t
}
```
-In this example, the `rotate` and `fade-in` animations fire at the same time.
+この例では、`rotate`と`fade-in`のアニメーションが同時に発火します。
-### Animating the items of a reordering list
+### 並び替えられるリストの項目をアニメーション化する {#animating-the-items-of-a-reordering-list}
-Items reordering in a list works out of the box using the previously described techniques. No additional special work is required. Items in a `@for` loop will be removed and re-added properly, which will fire off animations using `@starting-styles` for entry animations. Alternatively, you can use `animate.enter` for this same behavior. Use `animate.leave` to animate elements as they are removed, as seen in the example above.
+リスト項目の並び替えは、前述の手法を使うだけでそのまま機能します。特別な追加作業は必要ありません。`@for`ループ内の項目は適切に削除されて再追加されるため、enterアニメーションとして`@starting-styles`を使用したアニメーションが発火します。代わりに、同じ挙動を`animate.enter`で実現できます。上の例のように、要素が削除されるときは`animate.leave`を使ってアニメーションします。
-#### With Animations Package
+#### Animationsパッケージの場合
@@ -261,7 +261,7 @@ Items reordering in a list works out of the box using the previously described t
-#### With Native CSS
+#### ネイティブCSSの場合
@@ -269,12 +269,12 @@ Items reordering in a list works out of the box using the previously described t
-## Migrating usages of AnimationPlayer
+## AnimationPlayerの使用箇所を移行する {#migrating-usages-of-animationplayer}
-The `AnimationPlayer` class allows access to an animation to do more advanced things like pause, play, restart, and finish an animation through code. All of these things can be handled natively as well.
+`AnimationPlayer`クラスを使うと、コードからアニメーションを一時停止、再生、再開、完了するなど、より高度な操作をするためにアニメーションへアクセスできます。これらはすべてネイティブでも処理できます。
-You can retrieve animations off an element directly using [`Element.getAnimations()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getAnimations). This returns an array of every [`Animation`](https://developer.mozilla.org/en-US/docs/Web/API/Animation) on that element. You can use the `Animation` API to do much more than you could with what the `AnimationPlayer` from the animations package offered. From here you can `cancel()`, `play()`, `pause()`, `reverse()` and much more. This native API should provide everything you need to control your animations.
+[`Element.getAnimations()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getAnimations)を使うと、要素に関連付けられたアニメーションを直接取得できます。これは、その要素上のすべての[`Animation`](https://developer.mozilla.org/en-US/docs/Web/API/Animation)を配列として返します。`Animation` APIを使えば、アニメーションパッケージの`AnimationPlayer`が提供していたものよりも多くのことを行えます。ここから`cancel()`、`play()`、`pause()`、`reverse()`などを呼び出せます。このネイティブAPIだけで、アニメーションを制御するために必要な機能が揃うはずです。
-## Route Transitions
+## ルートトランジション {#route-transitions}
-You can use view transitions to animate between routes. See the [Route Transition Animations Guide](guide/routing/route-transition-animations) to get started.
+ルート間をアニメーションさせるには、ビュー遷移を使用できます。始めるには、[ルートトランジションアニメーションガイド](guide/routing/route-transition-animations)を参照してください。