anchor.diff:    *as long as it remains in that state*. In that sense, we are defining more than just
     animations here. We're actually defining what styles the element has in different states.
   
  +  Ces définitions d'états spécifient les *style finaux* de chaque état.
  +  Ils sont appliqués à l'élément une fois qu'il a effectué la transition vers cet état, et resteront *tant qu'il sera dans cet état*.
  +  En ce sens, nous définissons plus que des animations.
  +  Nous définissons en réalité les styles qu'aura l'élément dans différents états.
  +
     Once we have states, we can define *transitions* between the states. Each transition
     controls the timing of switching between one set of styles and the next:
   
  +  Une fois que nous avons des états, nous pouvons définir des transitions entre ces états.
  +  Chaque transition contrôle le timing du passage entre un ensemble de styles vers le suivant&nbsp;:
  +
   +makeExample('animations/ts/app/hero-list-basic.component.ts', 'transitions')(format=".")
   
   figure.image-display
  
positive.code:   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
  
negative.code:   measures from 0 to 1. The final timeline of the animation will based on the combination
    of keyframe offsets, duration, delay, and easing.
  
    Notons que les offsets ne sont *pas* définis en terme de temps absolu.
    Ce sont des mesures relatives de 0 à 1.
    La timeline finale de l'animation sera basée sur la combinaison des offsets de keyframes, de la durée, du délai et de l'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`.
  
    Définir des offsets pour les keyframes est optionnel.
    S'ils sont omis, des offsets uniformément espacés sont automatiquement assignés.
    Par exemple, trois keyframes sans offsets prédéfinis recevront les offsets `0`, `0.5`, et `1`.
  
  :marked
    ## Parallel Animation Groups
  
    ## Groupes d'Animation Parallèle
  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!
  
    Nous avons déjà vu comment animer plusieurs propriétés de style simultanément&nbsp;:
    il suffit de toutes les mettre dans la même définition de `style()`&nbsp;!
  
    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.
  
    Mais nous pourrions aussi vouloir configurer des *timings* différents pour des animations ayant lieu en parallèle.
    Par exemple, nous pourrions vouloir animer deux propriété CSS mais en utilisant un easing différent pour chacune d'elles.
  
    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:
  
    Pour cela nous pouvons utiliser les *groupes* d'animation.
    Dans cet exemple nous utilisons les groupes pour l'entrée et la sortie afin de pouvoir utiliser deux configurations temporelles différentes.
    Les deux sont appliquées au même élément en parallèle, mais s'exécutent indépendamment l'une de l'autre&nbsp;:
  
  +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.
  
    Un groupe anime la transformation et la largeur de l'élément.
    L'autre anime son opacité.
  