Translate tasks in 3-animation/2-css-animations

Author: KenjiI

3-animation/2-css-animations/1-animate-logo-css/solution.md

@@ -1,17 +1,17 @@
 
-CSS to animate both `width` and `height`:
+`width` と `height` 両方をアニメーションする CSS です:
 ```css
-/* original class */
+/* 元の class */
 
 #flyjet {
   transition: all 3s;
 }
 
-/* JS adds .growing */
+/* JS で .growing を追加*/
 #flyjet.growing {
   width: 400px;
   height: 240px;
 }
 ```
 
-Please note that `transitionend` triggers two times -- once for every property. So if we don't perform an additional check then the message would show up 2 times.
+`transitionend` は 2回トリガすることに注意してください -- すべてのプロパティに対して1度トリガします。したがって、追加のチェックをしない場合、メッセージは2度表示されます。

3-animation/2-css-animations/1-animate-logo-css/task.md

@@ -2,13 +2,13 @@ importance: 5
 
 ---
 
-# Animate a plane (CSS)
+# 飛行機をアニメーションする (CSS)
 
-Show the animation like on the picture below (click the plane):
+下の図のようなアニメーションを表示してください(飛行機をクリックしてください)。:
 
 [iframe src="solution" height=300]
 
-- The picture grows on click from `40x24px` to `400x240px` (10 times larger).
-- The animation takes 3 seconds.
-- At the end output: "Done!".
-- During the animation process, there may be more clicks on the plane. They shouldn't "break" anything.
+- 写真はクリックで `40x24px` から `400x240px` まで大きくなります(10倍)
+- アニメーションは 3秒です
+- 最後に "Done!" を出力します
+- アニメーション処理中にも飛行機がクリックがされる可能性がありますが、それらは何も "壊すべきではありません"。

3-animation/2-css-animations/2-animate-logo-bezier-css/solution.md

@@ -1,7 +1,7 @@
-We need to choose the right Bezier curve for that animation. It should have `y>1` somewhere for the plane to "jump out".
+このアニメーションに対する正しいベジェ曲線を選ぶ必要があります。"飛び出す" ようにするため、どこかで `y>1` となるタイミングが必要です。
 
-For instance, we can take both control points with `y>1`, like: `cubic-bezier(0.25, 1.5, 0.75, 1.5)`.
+例えば、`cubic-bezier(0.25, 1.5, 0.75, 1.5)` のように、両方の制御点が `y>1` を取ることができます。
 
-The graph:
+グラフは次の通りです:
 
 ![](bezier-up.png)

3-animation/2-css-animations/2-animate-logo-bezier-css/task.md

@@ -2,12 +2,10 @@ importance: 5
 
 ---
 
-# Animate the flying plane (CSS)
+# 飛んでいる飛行機をアニメーションする (CSS)
 
-Modify the solution of the previous task <info:task/animate-logo-css> to make the plane grow more than it's original size 400x240px (jump out), and then return to that size.
+前のタスク <info:task/animate-logo-css> の解答を修正して、元のサイズ 400x240px よりも大きくなり(飛び出し)、その後元のサイズに戻るようにしてください。
 
-Here's how it should look (click on the plane):
+次のように見えるようにします(飛行機をクリックしてください):
 
 [iframe src="solution" height=350]
-
-Take the solution of the previous task as the source.

3-animation/2-css-animations/3-animate-circle/task.md

@@ -2,15 +2,15 @@ importance: 5
 
 ---
 
-# Animated circle
+# アニメーションサークル
 
-Create a function `showCircle(cx, cy, radius)` that shows an animated growing circle.
+アニメーションで大きくなる円を表示する関数 `showCircle(cx, cy, radius)` を作成してください。
 
-- `cx,cy` are window-relative coordinates of the center of the circle,
-- `radius` is the radius of the circle.
+- `cx,cy` は、円の中心のウィンドウ相対座標です。
+- `radius` は円の半径です。
 
-Click the button below to see how it should look like:
+どのように表示されるかは下のボタンをクリックしてください:
 
 [iframe src="solution" height=260]
 
-The source document has an example of a circle with right styles, so the task is precisely to do the animation right.
+ソースとなるドキュメントには正しいスタイルの円の例があるので、このタスクは正しいアニメーションを行うようにすることです。