anchor.diff:  +makeExample('animations/ts/app/hero-list-enter-leave-states.component.ts', 'animationdef')(format=".")
   
   :marked
  -  ## Animatable Properties and Units
  -
  -  Since Angular's animation support builds on top of Web Animations, we can animate any property
  +  ## Animatable properties and units
  +
  +  Since Angular's animation support builds on top of Web Animations, you can animate any property
     that the browser considers *animatable*. This includes positions, sizes, transforms, colors,
  -  borders and many others. The W3C maintains
  -  [a list of animatable properties](https://www.w3.org/TR/css3-transitions/#animatable-properties).
  -
  -  For positional properties that have a numeric value, we can define a unit by providing
  +  borders, and many others. The W3C maintains
  +  [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, you can define a unit by providing
     the value as a string with the appropriate suffix:
   
     * `'50px'`
     * `'3em'`
     * `'100%'`
   
  -  For most dimensional properties we can also just define a number which is then assumed to be
  -  in pixels:
  +  If you don't provide a unit when specifying dimension, Angular assumes the default of `px`:
   
     * `50` is the same as saying `'50px'`
   
  -  ## Automatic Property Calculation
  +  ## 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 the value of a dimensional style property that we want to
  -  animate is not known until at runtime. For example, it is quite common for elements
  -  to have widths and heights that depend on their content and the screen size. These
  -  properties are often tricky to animate with CSS.
  -
  -  With Angular we can use a special `*` property value in these cases. What it means
  -  is that the value of this property will be computed at runtime and then plugged into
  -  the animation.
  -
  -  The "leave" animation in this example takes whatever height the element has before it
  +  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
     leaves and animates from that height to zero:
   
   +makeExample('animations/ts/app/hero-list-auto.component.ts', 'animationdef')(format=".")
   
   :marked
  -  ## Animation Timing
  -
  -  There are three timing properties we can tune for every animated transition:
  -  The duration, the delay, and the easing function. They are all combined into
  +  ## Animation timing
  +
  +  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*.
   
     ### Duration
   
     The duration controls how long the animation takes to run from start to finish.
  -  We can define a duration in three ways:
  +  You can define a duration in three ways:
   
     * As a plain number, in milliseconds: `100`
     * In a string, as milliseconds: `'100ms'`
  
positive.code: +makeExample('animations/ts/app/hero-list-enter-leave.component.ts', 'animationdef')(format=".")
  
  :marked
    Note that in this case we have the styles applied to the void state directly in the
    transition definitions, and not in a separate `state(void)` definition. We do this because
    we want the transforms to be different on enter and leave: The element enters from the left
    and leaves to the right.
  
    ## Example: Entering and Leaving from Different States
  figure
    img(src="/resources/images/devguide/animations/animation_enter_leave_states.gif" alt="Enter and leave animations combined with state animations" align="right" style="width:200px" )
  :marked
    We can also combine this animation with the earlier state transition animation by
    using the hero state as the animation state. What this will let us do is configure
    different transitions for entering and leaving based on what the state of the hero
    is:
  
  
negative.code: :marked
    ### The `void` state
  
    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.
  
    For example the `* => void` transition applies when the element leaves the view,
    regardless of what state it was in before it left.
  