anchor.diff:    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
  
positive.code:   * [Multi-Step Animations with Keyframes](#multi-step-animations-with-keyframes)
    * [Parallel Animation Groups](#parallel-animation-groups)
  
  .l-sub-section
    :marked
        The examples referenced in this chapter are available as a [live example](/resources/live-examples/animations/ts/plnkr.html).
  
  a(id="example-transitioning-between-states")
  .l-main-section
  :marked
    ## Quickstart Example: Transitioning Between Two States
  figure
    img(src="/resources/images/devguide/animations/animation_basic_click.gif" alt="A simple transition animation" align="right" style="width:220px;margin-left:20px" )
  :marked
    Let's build a simple animation that transitions an element between two states
    driven by a model attribute.
  
    Animations are defined inside `@Component` metadata. Before we can add some, we need
    to import a few animation-specific functions:
  
  +makeExample('animations/ts/app/hero-list-basic.component.ts', 'imports')(format=".")
  
  
negative.code: 
  :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
  