docs(animations): update copy

public/docs/ts/latest/guide/animations.jade

@@ -16,14 +16,14 @@ include ../_util-fns
     and run natively on [browsers that support it](http://caniuse.com/#feat=web-animation).
 
     For other browsers, a polyfill is required. Grab
-    [`web-animations.min.js` from Github](https://github.com/web-animations/web-animations-js) and
+    [`web-animations.min.js` from GitHub](https://github.com/web-animations/web-animations-js) and
     add it to your page.
 
 
 :marked
   # Contents
 
-  * [Quickstart example: Transitioning between two states](#example-transitioning-between-states).
+  * [Example: Transitioning between two states](#example-transitioning-between-states).
   * [States and transitions](#states-and-transitions).
   * [Example: Entering and leaving](#example-entering-and-leaving).
   * [Example: Entering and leaving from different states](#example-entering-and-leaving-from-different-states).
@@ -66,16 +66,15 @@ figure
     animation metadata.
 
 :marked
-  Now, using the "`[@triggerName]`" syntax, attach the animation that you just defined to
+  Now, using the `[@triggerName]` syntax, attach the animation that you just defined to
   one or more elements in the component's template.
 
 +makeExample('animations/ts/app/hero-list-basic.component.ts', 'template')(format=".")
 
 :marked
   Here, the animation trigger applies to every element repeated by an `ngFor`. Each of
   the repeated elements animates independently. The value of the
-  attribute is bound to the expression `hero.state`. It is always either `inactive`
-  or `active`.
+  attribute is bound to the expression `hero.state` and is always either `active`/`inactive`.
 
   With this setup, an animated transition appears whenever a hero object changes state.
   Here's the full component implementation:
@@ -148,10 +147,10 @@ figure.image-display
 :marked
   ### The `void` state
 
-  The special state, called `void`, can apply to any animation. It applies
+  The special state called `void` can apply to any animation. It applies
   when the element is *not* attached to a view, perhaps because it has not yet been
-  added or because it has been removed. The `void` state is useful for defining "enter" and
-  "leave" animations.
+  added or because it has been removed. The `void` state is useful for defining enter and
+  leave animations.
 
   For example the `* => void` transition applies when the element leaves the view,
   regardless of what state it was in before it left.
@@ -189,10 +188,10 @@ figure
   different transitions for entering and leaving based on what the state of the hero
   is:
 
-  * Inactive hero enter: `void => inactive`.
-  * Active hero enter: `void => active`.
-  * Inactive hero leave: `inactive => void`.
-  * Active hero leave: `active => void`.
+  * Inactive hero enter: `void => inactive`
+  * Active hero enter: `void => active`
+  * Inactive hero leave: `inactive => void`
+  * Active hero leave: `active => void`
 
   This gives you fine-grained control over each transition:
 
@@ -211,30 +210,30 @@ figure.image-display
   [a list of animatable properties](https://www.w3.org/TR/css3-transitions/#animatable-properties)
   on its [CSS Transitions page](https://www.w3.org/TR/css3-transitions).
 
-  For positional properties that have a numeric value, define a unit by providing
+  For positional properties that have a numeric value, you can define a unit by providing
   the value as a string with the appropriate suffix:
 
   * `'50px'`
   * `'3em'`
   * `'100%'`
 
-  Define most dimensional properties as a number in pixels:
+  If you don't provide a unit when specifying dimension, Angular will assume the default of `px`:
 
   * `50` is the same as saying `'50px'`
 
   ## Automatic property calculation
 figure
   img(src="/resources/images/devguide/animations/animation_auto.gif" alt="Animation with automated height calculation" align="right" style="width:220px;margin-left:20px" )
 :marked
-  Sometimes your app doesn't know the value of a dimensional style property until runtime.
-  For example, it is quite common for elements to have widths and heights that
+  Sometimes you don't know the value of a dimensional style property until runtime.
+  For example, elements often have widths and heights that
   depend on their content and the screen size. These properties are often tricky
   to animate with CSS.
 
   In these cases, you can use a special `*` property value so that the value of the
   property is computed at runtime and then plugged into the animation.
 
-  In this example, the "leave" animation takes whatever height the element has before it
+  In this example, the leave animation takes whatever height the element has before it
   leaves and animates from that height to zero:
 
 +makeExample('animations/ts/app/hero-list-auto.component.ts', 'animationdef')(format=".")
@@ -244,7 +243,7 @@ figure
 
   There are three timing properties you can tune for every animated transition:
   the duration, the delay, and the easing function. They are all combined into
-  a single transition, *timing string*.
+  a single transition *timing string*.
 
   ### Duration
 
@@ -267,7 +266,7 @@ figure
 
   The [easing function](http://easings.net/) controls how the animation accelerates
   and decelerates during its runtime. For example, an `ease-in` function causes
-  the animation to begin relatively slowly and picks up speed as it progresses. You
+  the animation to begin relatively slowly but pick up speed as it progresses. You
   can control the easing by adding it as a *third* value in the string after the duration
   and the delay (or as the *second* value when there is no delay):
 
@@ -279,7 +278,7 @@ figure
 :marked
   ### Example
 
-  Here are a couple of custom timings in action. Both "enter" and "leave" last for
+  Here are a couple of custom timings in action. Both enter and leave last for
   200 milliseconds but they have different easings. The leave begins after a
   slight delay:
 
@@ -294,7 +293,7 @@ figure
   that goes through one or more intermediate styles when transitioning between two sets of styles.
 
   For each keyframe, you specify an *offset* that defines at which point
-  in the animation keyframe applies. The offset is a number between zero,
+  in the animation that keyframe applies. The offset is a number between zero,
   which marks the beginning of the animation, and one, which marks the end.
 
   This example adds some "bounce" to the enter and leave animations with
@@ -316,16 +315,16 @@ figure
 figure
   img(src="/resources/images/devguide/animations/animation_groups.gif" alt="Parallel animations with different timings, implemented with groups" align="right" style="width:220px;margin-left:20px" )
 :marked
-  You've seen how you to animate multiple style properties at the same time:
+  You've seen how to animate multiple style properties at the same time:
   just put all of them into the same `style()` definition.
 
   But you may also want to configure different *timings* for animations that happen
   in parallel. For example, you may want to animate two CSS properties but use a
   different easing function for each one.
 
   For this you can use animation *groups*. In this example, using groups both on
-  enter and leave allow for two different timing configurations. Both
-  are applied to the same element in parallel, but run independent of each other:
+  enter and leave allows for two different timing configurations. Both
+  are applied to the same element in parallel, but run independently of each other:
 
 +makeExample('animations/ts/app/hero-list-groups.component.ts', 'animationdef')(format=".")