anchor.diff:  
   :marked
     ## Animatable Properties and Units
  +
  +  ## Propriétés et Unités Animables
   
     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).
   
  +  Parce que le support des animations Angular est construit sur la base des Animations Web,
  +  nous pouvons animer n'importe quelle propriété considérée *animable* par le navigateur.
  +  Cela inclut la position, taille, transformation, couleur, bordure et beaucoup d'autres.
  +  Le W3C maintient [une liste des propriétés animables](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:
  +
  +  Pour les propriétés de position qui ont une valeur numérique, on peut définir une unité en fournissant
  +  la valeur sour la forme d'une chaîne de caractères avec le suffixe adapté&nbsp;:
   
     * `'50px'`
     * `'3em'`
     * `'100%'`
   
  +  * `'50px'`
  +  * `'3em'`
  +  * `'100%'`
  +
     For most dimensional properties we can also just define a number which is then assumed to be
     in pixels:
   
  +  Pour la plupart des propriétés de taille on peut également définir un nombre qui sera interprété comme étant en pixels&nbsp;:
  +
     * `50` is the same as saying `'50px'`
   
  +  * `50` revient à écrire `'50px'`
  +
     ## Automatic Property Calculation
  +
  +  ## Calcul Automatique de Propriété
  +
   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
  
positive.code:   measures from 0 to 1. The final timeline of the animation will based on the combination
    of keyframe offsets, duration, delay, and easing.
  
    Defining offsets for keyframes is optional. If we omit them, offsets with even
    spacing are automatically assigned. For example, three keyframes without predefined
    offsets will receive offsets `0`, `0.5`, and `1`.
  
  :marked
    ## Parallel Animation Groups
  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
    We've already seen how we can animate multiple style properties at the same time:
    Just put all of them into the same `style()` definition!
  
    But we may also want to configure different *timings* for animations that happen
    in parallel. For example, we may want to animate two CSS properties but use a
    different easing function for each one.
  
    For this we can use animation *groups*. In this example we use groups both on
    enter and leave so that we can use two different timing configurations. Both
    are applied to the same element in parallel, but run independent of each other:
  
  +makeExample('animations/ts/app/hero-list-groups.component.ts', 'animationdef')(format=".")
  
  :marked
    One group animates the element transform and width. The other animates the opacity.
  
negative.code:   we want the transforms to be different on enter and leave: The element enters from the left
    and leaves to the right.
  
    Notons que dans ce cas les styles appliqués à l'état vide se trouvent directement dans les définitions de transition, et non dans une définition `state(void)` séparée.
    Nous faisons cela car nous voulons des transitions différentes pour l'entrée et la sortie&nbsp;:
    l'élement entre par la gauche et sort par la droite.
  
    ## Example: Entering and Leaving from Different States
  
    ## Exemple&nbsp;: Entrer et Sortir depuis des États Différents
  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
  