Part 3 - 2.3 JavaScript animations 과제 1-2 번역 #1597

7-animation/3-js-animation/1-animate-ball/solution.md

@@ -1,10 +1,10 @@
-To bounce we can use CSS property `top` and `position:absolute` for the ball inside the field with `position:relative`.
+공을 튀어 오르게 하기 위해서는 공에는 CSS 프로퍼티인 `top`과 `position:absolute`를, 공이 들어있는 필드에는`position:relative`를 사용할 수 있습니다.
 
-The bottom coordinate of the field is `field.clientHeight`. The CSS `top` property refers to the upper edge of the ball. So it should go from `0` till `field.clientHeight - ball.clientHeight`, that's the final lowest position of the upper edge of the ball.
+필드의 아래쪽 좌표는 `field.clientHeight`입니다. `top` 프로퍼티는 공의 위쪽 모서리를 의미합니다. 그러므로 공의 위쪽 모서리는 `0`부터 그 위치의 최솟값인 `field.clientHeight - ball.clientHeight`까지 움직입니다.
 
-To to get the "bouncing" effect we can use the timing function `bounce` in `easeOut` mode.
+튀어 오르는 애니메이션 효과를 적용하기 위해 `easeOut`모드에서 timing 함수 `bounce`를 사용합니다.
 
-Here's the final code for the animation:
+다음은 애니메이션 효과를 적용한 최종 코드입니다.
 
 ```js
 let to = field.clientHeight - ball.clientHeight;

7-animation/3-js-animation/1-animate-ball/task.md

@@ -2,8 +2,8 @@ importance: 5
 
 ---
 
-# Animate the bouncing ball
+# 공에 튀어 오르는 애니메이션 효과 주기
 
-Make a bouncing ball. Click to see how it should look:
+튀어 오르는 공을 만들어봅시다. 애니메이션이 어떻게 적용되어야 하는지 보려면 클릭해보세요.
 
 [iframe height=250 src="solution"]

7-animation/3-js-animation/2-animate-ball-hops/solution.md

@@ -1,12 +1,12 @@
-In the task <info:task/animate-ball> we had only one property to animate. Now we need one more: `elem.style.left`.
+<info:task/animate-ball> 과제에서는 애니메이션 효과를 주는 프로퍼티가 오직 한개 존재했습니다. 이제 `elem.style.left`라는 하나의 프로퍼티가 더 필요합니다.
 
-The horizontal coordinate changes by another law: it does not "bounce", but gradually increases shifting the ball to the right.
+튀어 오르지 않지만 공이 서서히 오른쪽으로 이동하는 또 다른 규칙에 의해 수평좌표가 바뀝니다.
 
-We can write one more `animate` for it.
+오른쪽으로 움직이는 것을 위한 `animate`를 하나 더 사용할 수 있습니다.
 
-As the time function we could use `linear`, but something like `makeEaseOut(quad)` looks much better.
+time function으로 `linear`을 사용할 수 있지만 `makeEaseOut(quad)`같은 것을 사용하는게 더 좋을 것 같습니다.
 
-The code:
+코드는 다음과 같습니다.
 
 ```js
 let height = field.clientHeight - ball.clientHeight;

7-animation/3-js-animation/2-animate-ball-hops/task.md

@@ -2,12 +2,12 @@ importance: 5
 
 ---
 
-# Animate the ball bouncing to the right
+# 공을 오른쪽으로 튀어 오르게하는 애니메이션 효과 주기
 
-Make the ball bounce to the right. Like this:
+다음과 같이 공이 오른쪽으로 튀어 오르게 해봅시다.
 
 [iframe height=250 src="solution"]
 
-Write the animation code. The distance to the left is `100px`.
+애니메이션 코드를 작성해보세요. 왼쪽으로부터 거리는 `100px`입니다.
 
-Take the solution of the previous task <info:task/animate-ball> as the source.
+이전 과제 <info:task/animate-ball>의 해답을 참고해보세요.