anchor.diff:    ### Easing
   
     The [easing function](http://easings.net/) controls how the animation accelerates
  -  and decelerates during its runtime. For example, using an `ease-in` function means
  -  the animation begins relatively slowly but then picks up speed as it progresses. We
  +  and decelerates during its runtime. For example, an `ease-in` function causes
  +  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):
   
  
positive.code: +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
    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
    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:
  
    * `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 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
    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
    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:
  
    * As a plain number, in milliseconds: `100`
    * In a string, as milliseconds: `'100ms'`
  
negative.code:   * Inactive hero leave: `inactive => void`
    * Active hero leave: `active => void`
  
    This gives you fine-grained control over each transition:
  
  figure.image-display
    img(src="/resources/images/devguide/animations/ng_animate_transitions_inactive_active_void.png" alt="This example transitions between active, inactive, and void states" width="400")
  