review 03/01

chapters/03/01.md

@@ -1,12 +1,12 @@
-# 动作中的动画
+# Animations in action
 
-现在我们已经了解了 `transition` 属性，让我们深入了解下 `animation` 属性
+前面我们讲了 `transition` 属性，现在让我们来学习下 `animation` 属性
 
 ![](images/abc.png)
 
 ## A symbiotic relationship
 
-`animation` 属性应用到元素上如同 `transition`。它还需要名为 `keyframes` 的第二部分
+给元素添加 `animation` 跟添加 `transition`类似。不过它还需要 `keyframes` 。
 
     .element {
       animation: ...
@@ -16,50 +16,46 @@
       /* Keyframes go here */
     }
 
-单独定义 `keyframse` 的好处是它允许我们创建可以多次重复使用的动画。
+单独定义 `keyframes` 的好处是我们可以复用这些动画。
 
 ## The `animation` property
 
-应用这些keyframes到一个元素上使用 `animation` 属性来完成。除了需要一些额外的属性外，和 `transition` 十分相似。`animation` 可以使用下面的简写方式书写：
+我们通过 `animation` 属性可以将编写的 keyframes 应用到元素上。`animation` 和 `transition` 很类似，不过多了一些其他的选项。下面是 `animation` 的简写方式：
 
     animation: change-background 4s linear infinite;
 
-分开写像下面这样：
+分开写就是下面这样：
 
     animation-name: change-background;
     animation-duration: 4s;
     animation-timing-function: linear;
     animation-repeat: infinite;
 
-`transition` 需要带着一个 `property`，例如 "background" 或 “all”，`animation` 属性则需要带 `keyframes` 集合的名字来描述动画顺序
+`transition` 需要指定一个目标属性，例如 "background" 或 "all"，`animation` 则需要带 `keyframes` 的名字来描述动画。
 
-动画拥有一些变换没有的属性。例如，我们可以告诉动画来回交替，而不是每次从头开始循环。
+animation 拥有一些 transition 没有的属性。例如，我们可以告诉动画来回交替循环，而不是每次从头开始循环。
 
 ## Keyframes
 
-在CSS中，`keyframes` 集合是通过动画的一系列停靠点。
+`keyframes` 是用来描述动画过程中一系列变化的。
 
-我认为用一个例子来描述它是十分有用的。让我们从网页的 `div` 标签开始随着时间变化改变背景色。从蓝色背景开始，变为橙色，最后变为绿色。
+我们用一个简单的例子来说明下：在网页上有一个 `div` 标签，它的背景颜色不断地在变，像下面图中显示的那样。
 
 ![](images/change-background-min.gif)
 
-如果我们尝试向某些人解释背景色是如何跟随时间改变的，我们也许会这么说：
+怎样描述这种变化呢？我们可以说“开始时蓝色，到一半时变成橙色，最后变成绿色”
 
-“从蓝色开始，然后是橙色背景，最后绿色背景”
+如果再精确一点描述，我们可以用百分比来描述：
 
-或者，如果我们想要更精确地来解释，也许会使用百分比来表述时间点
-
-”0%的时候，从蓝色背景开始，然后50%的时候橙色，100%的时候变成绿色“
+“0%的时候蓝色背景，50%的时候橙色，100%的时候绿色”
 
 我们可以概括为：
 
     0% Blue
     50% Green
     100% Orange
 
-通过这些百分比，我们创建了一系列动画可能传递的“路径点”。 我们现在需要做的就是告诉浏览器这些百分比实际上是 `keyframes` 并为动画命名。 结果如下：
-
-
+这样子我们就创建了动画整个过程中包含的“路径点”（waypoint）。 现在要做的就是将这些百分比按照 `keyframes` 的规则去写并命名。 结果如下：
 
     @keyframes change-background {
       0% {
@@ -73,27 +69,25 @@
       }
     }
 
-这个动画被称为 “change-background”。稍后我们将 keyframes 应用于元素时使用它。
+这个动画名字叫 “change-background”。稍后我们会用到它。
 
-当您从上到下阅读代码时，百分比描述了每个关键帧发生在动画中的距离。我们可以在这里看到它：
+结合下面的例子，我们可以看出，上面的百分比指的是在动画过程中，其对应的 keyframe 发生的“时间点”。还可以知道，我们只要告诉浏览器开始、中间和结束时的颜色就可以了，在这些状态之间变化时，浏览器会自动去计算颜色值的插值。
 
 ![Source: http://codepen.io/donovanh/pen/WbqNwd?editors=110](images/simple-keyframes-min.gif)
 
-当动画发生时，浏览器会创建从每种背景颜色到下一种颜色所需的中间帧。通过告诉浏览器我们希望div从一种颜色开始，中间变成另外一种颜色，最后变成第三种颜色结束，浏览器可以完成在每个点之间创建动画的工作。
-
-我已经整理了[一个 CodePen 示例](http://codepen.io/donovanh/pen/WbqNwd?editors=110)，表明了这一点。
+[CodePen 链接](http://codepen.io/donovanh/pen/WbqNwd?editors=110)
 
-之前，我曾提到使用 animation-direction 属性来替换动画。这是它的样子：
+前面提到过，使用 animation-direction 可以让动画来回交替变化，看下面的例子，直观地感受下：
 
 ![](images/simple-keyframes-alternating-min.gif)
 
-在这种情况下，我已将 animation-direction 属性更改为 alternate。[在 CodePen 上](http://codepen.io/donovanh/pen/NPZqej)看到它。
+代码放到[CodePen](http://codepen.io/donovanh/pen/NPZqej)上了。 animation-direction 属性已经更改为 alternate
 
 ## Prefixes
 
-目前，仍然需要在动画属性上使用 -webkit- 前缀。我没有将它添加到示例中，但是您的动画需要在 Safari 等浏览器中使用它将是需要的。
+虽然我写的代码里没有加 -webkit- 等前缀，但如果要在实际工程里应用 animation，还是要添加对应的浏览器前缀。
 
-在CodePen中，您可以使用 CSS 设置中的 “Autoprefixer” 选项。对于本地开发，我使用 Gulp 版本的 Autoprefixer。 [Prefix Free](http://leaverou.github.io/prefixfree/)也是一个不错的选择。
+在 CodePen 中，你可以使用 CSS 设置中的 “Autoprefixer” 选项。对于本地开发，我使用 Gulp 版本的 Autoprefixer。 [Prefix Free](http://leaverou.github.io/prefixfree/)也是一个不错的选择。
 
 ## Homework