[CSS Animation] 리뷰반영 수정

Author: dazzel3

7-animation/2-css-animations/article.md

@@ -129,34 +129,34 @@ stripe.onclick = function() {
 
 ## 'transition-timing-function' 프로퍼티
 
-함수 Timing에서는 애니메이션 프로세스가 시간에 따라 어떻게 분배되는지를 설정합니다. 애니메이션 프로세스가 천천히 시작하다가 빠르게 진행되거나 반대로 진행될 것입니다.
+timing 함수를 사용하면 시간에 따라 애니메이션 효과를 어떻게 분배할지를 설정할 수 있습니다. 애니메이션 효과가 초반엔 천천히 나타나다가 나중엔 빠르게 나타나도록 할 수 있고, 물론 이 반대로도 설정할 수 있죠.
 
-처음 보면 복잡한 프로퍼티로 느껴질 수 있습니다. 하지만 시간을 조금만 투자하면 매우 간단해집니다.
+`transition-timing-function`을 처음 접했다면 가장 복잡한 프로퍼티라고 느껴질 수 있습니다. 그렇지만 시간을 조금 투자해 학습하면 매우 간단한 프로퍼티라는 것을 알 수 있죠.
 
-이 프로퍼티의 값으로는 베지어 곡선(Bezier curve)과 단계(Steps) 값이 가능합니다. 조금 더 자주 쓰이는 베지어 곡선부터 알아봅시다.
+`transition-timing-function` 프로퍼티 값엔 베지어 곡선(bezier curve)이나 단계(step)가 올 수 있습니다. 먼저 사용 빈도가 높은 베지어 곡선부터 알아봅시다.
 
-### 베지어 곡선(Bezier curve)
+### 베지어 곡선
 
-함수 Timing에서는 아래의 조건을 만족하는 4개의 제어점을 가진 [베지어 곡선](/bezier-curve)을 설정할 수 있습니다.
+timing 함수에는 아래 조건을 만족하는 4개의 제어점을 가진 [베지어 곡선](/bezier-curve)을 설정할 수 있습니다.
 
 1. 첫번째 제어점: `(0,0)`
 2. 마지막 제어점: `(1,1)`
-3. 중간 제어점들의 `x`값은 `0..1`구간이어야 하며, `y`값은 어떤 값이든 가능합니다.
+3. 중간 제어점들의 `x`값은 `0..1` 사이에 있어야 합니다. 반면 `y`값엔 제약이 없습니다.
 
-CSS의 베지어 곡선 문법은 `cubic-bezier(x2, y2, x3, y3)`입니다. 여기서 첫 번째 제어점은 `(0,0)`으로, 네 번째 제어점은 `(1,1)`로 고정되어 있으므로 두 번째와 세 번째 제어점만 설정하면 됩니다.
+CSS에선 베지어 곡선을 `cubic-bezier(x2, y2, x3, y3)`형태로 정의합니다. 규칙에 따라 첫 번째 제어점은 `(0,0)`, 네 번째 제어점은 `(1,1)`로 고정되므로 우리는 두 번째와 세 번째 제어점만 설정하면 됩니다.
 
-함수 Timing을 통해 애니메이션 프로세스가 시간 내에 얼마나 빨리 진행되는지 설정할 수 있습니다.
+timing 함수엔 시간이 지남에 따라 얼마나 빠르게 애니메이션 효과가 나타나게 할지를 설정합니다.
 
-- `x`축은 시간을 의미합니다. `0`은 `transition-duration`의 시작하는 시간을, `1`은 끝나는 시간을 나타내죠.
-- `y`축은 프로세스의 완성을 명시합니다. `0`은 프로퍼티의 시작 상태를, `1`은 최종 상태를 나타내죠.
+- `x`축엔 시간을 설정합니다. `0`은 `transition-duration`에서 시작하는 시간, `1`은 끝나는 시간을 나타냅니다.
+- `y`축엔 프로세스 완성 정도를 설정합니다. `0`은 프로퍼티 시작 값을, `1`은 최종값을 나타냅니다.
 
-가장 간단한 변형은 애니메이션이 같은 선형 속도로 균일하게 진행되는 경우입니다. `cubic-bezier(0, 0, 1, 1)`로 설정할 수 있습니다.
+가장 간단한 애니메이션 효과는 애니메이션이 일정한 속도로 나타나는 경우입니다. `cubic-bezier(0, 0, 1, 1)`로 설정할 수 있습니다.
 
 그러면 아래의 곡선과 같은 모양이 나옵니다.
 
 ![](bezier-linear.svg)
 
-보시다시피, 그냥 직선입니다. 시간(`x`)이 지나면서, 애니메이션의 완성도(`y`)가 `0`에서 `1`로 꾸준히 올라갑니다.
+보시다시피 그냥 직선입니다. 시간(`x`)이 지나면서 애니메이션의 완성도(`y`)가 `0`에서 `1`로 꾸준히 올라갑니다.
 
 아래 기차를 클릭하여, 기차가 일정한 속도로 왼쪽에서 오른쪽으로 이동하는 것을 확인해보세요.
 
@@ -182,7 +182,7 @@ CSS의 베지어 곡선 문법은 `cubic-bezier(x2, y2, x3, y3)`입니다. 여
 
 그래프에서 볼 수 있듯이 프로세스는 빠르게 시작되었다가, 즉 곡선이 높이 솟았다가 점점 느려집니다.
 
-기차를 클릭하여 함수 Timing의 움직임을 확인해보세요.
+기차를 클릭하여 timing 함수의 움직임을 확인해보세요.
 
 [codetabs src="train"]
 
@@ -206,7 +206,7 @@ CSS:
 | <code>(0.25, 0.1, 0.25, 1.0)</code> | <code>(0.42, 0, 1.0, 1.0)</code> | <code>(0, 0, 0.58, 1.0)</code> | <code>(0.42, 0, 0.58, 1.0)</code> |
 | ![ease, figure](ease.svg) | ![ease-in, figure](ease-in.svg) | ![ease-out, figure](ease-out.svg) | ![ease-in-out, figure](ease-in-out.svg) |
 
-`*`은 기본값으로, 함수 Timing이 없을 때 `ease`가 사용됩니다.
+`*`은 기본값으로, timing 함수가 없을 때 `ease`가 사용됩니다.
 
 기차가 느려지도록 하려면 `ease-out`을 사용할 수 있습니다.
 
@@ -256,9 +256,9 @@ CSS:
 
 하지만 명확한 애니메이션을 위해서 베지어 곡선을 어떻게 만들어야 할까요? 많은 툴이 있습니다. 예를 들어, <http://cubic-bezier.com/>에서 베지어 곡선을 만들 수 있습니다.
 
-### 단계(Steps)
+### 단계
 
-함수 Timing의 값 `steps(number of steps[, start/end])`를 통해 애니메이션을 여러 단계로 나눌 수 있습니다.
+timing함수의 값인 `steps(number of steps[, start/end])`를 통해 애니메이션을 여러 단계로 나눌 수 있습니다.
 
 아래 숫자로 된 예시를 봅시다.