Transitions, transformations, animations

Transitions animées en CSS

• Les navigateurs modernes permettent tous de créer très simplement des transitions animées dans les pages web, en n'utilisant que les CSS
• Une transition = une propriété qui change lors d'un événement (généralement, le survol par la souris)
• Exemple :

  .box {
    background-color: aquamarine;
  }
  
  .box:hover {
    background-color: gold;
  }
    

• La propriété transition permet de contrôler comment cette transition s'effectue

Exemple de transition animée

• La propriété transition est un raccourci (comme border ou background) : elle permet de spécifier plusieurs paramètres
• Le paramètre fondamental est la durée de la transition : ici, on la met à 1 seconde. Le navigateur calcule les états intermédiaires.

.box {
  background-color: aquamarine;
  transition: 1s;
}

.box:hover {
  background-color: gold;
}
  

Délai

• Le paramètre de délai permet de faire commencer la transition plus tard

	transition: 3s 1s;
	

La fonction de temporisation

• On peut contrôler la vitesse de transition avec le paramètre de timing function (rapide au début, en 5 étapes, etc.)

  transition: 2s ease-out;
  

  transition: 2s linear;
  

  transition: 2s steps(4, end);
  

• Il est possible de spécifier cette fonction de manière encore plus fine en la définissant comme une courbe de Bézier : voir par exemple cet outil en ligne pour comprendre l'idée

Animation de plusieurs propriétés

• On peut spécifier la propriété concernée par la transition (la couleur, la taille, etc.)
• Utile notamment pour animer chaque propriété indépendamment, en séparant les transitions par des virgules

    transition: background 5s steps(4, end),
                width 3s 2s linear,
                text-shadow 2s;
    

Propriétés animables

• Quelles sont les propriétés dont on peut animer les transitions ?
• Il y en a un grand nombre
• Quelles sont les événements déclenchant une transition animable ?
• Plusieurs pseudo-classes : :hover, :active, :focus… et les media queries (voir cet article pour des démos)

Transitions différentes aller/retour

• On peut faire des transitions différentes à l'aller et au retour
• Si la propriété transition change dans l'état d'arrivée, c'est la nouvelle qui compte
• C'est logique d'un point de vue CSS, mais en pratique c'est un peu contre-intuitif !

  .direction {
    background: tan;
    transition: 3s;
  }
  
  .direction:hover {
    background: teal;
    transition: .5s;
  }

Une subtilité des transitions

• Attention : les transitions n'ont d'effet qu'entre propriétés à valeur fixées
• Par exemple, cette transition ne sera pas animée, car la valeur auto n'est pas considérée comme fixée

  .piege {
    transition: 3s;
    margin: auto;
  }
  
  .piege:hover {
    margin: 0 30%;
  }

• En revanche la transition marche si l'on enlève margin:auto, car la marge vaut alors 0, ce qui bien « fixé ».

Transformations

• Les transformations modifient l'apparence des éléments dans le navigateur : rotation, échelle, translation…
• Elles n'influent pas sur la mise en page : l'apparence de l'élément change, mais les autres éléments font comme si de rien n'était
• Exemple :
  Ce texte sera en partie caché. Ce texte sera en partie caché. Ce texte sera en partie caché. Ce texte sera en partie caché.

    .tourne {
      transform: rotate(10deg);
  }
  

  Ce texte sera en partie caché. Ce texte sera en partie caché. Ce texte sera en partie caché. Ce texte sera en partie caché.
• Attention, les transformations ne s'appliquent pas à n'importe quels éléments (en particulier, pas à la plupart des éléments inline)

Les transformations possibles

• On utilise des fonctions de transformation, que l'on place dans la propriété transform
• On peut en mettre plusieurs en les séparant par des espaces
• Rotation : rotate(30deg)
• Échelle : scale(2, 0.5)
• Translation : translate(10px, -3em)
• Inclinaison : skewX(10deg), skewY(2.1rad)
• Et même en 3D, par exemple rotateX(45deg) (voir ce tutoriel)

Transitions sur les transformations

• Les transformations prennent tout leur intérêt lorsqu'on les utilise avec des transitions
• Encore quelques exemples ici (à partir de la case 28)
• Et un tutoriel
• Attention, il n'est pas possible d'animer séparément les transformations : on ne peut faire que transition: transform 1s, pas transition: rotate 1s, scale 2s, car ce ne sont pas des propriétés.

Transitions et ergonomie

• Les transitions modifiant la taille, la position, ou appliquant une transformation risquent de faire sortir le pointeur de l'objet survolé
• L'animation fait des allers-retours : pas très joli, et peut être très énervant
• Une possibilité est de déclencher la transition sur un autre élément que celui qui sera animé. Exemple, une boîte qui bouge dans une autre boîte :

  .conteneur .bouge {
      transition: 1s;
  }
  .conteneur:hover .bouge {
      transform: translate(60px);
  }

  .conteneur

  .bouge
  C'est le survol de la grande boîte qui déclenche le mouvement de la petite

Animations

• Les transitions sont déjà très puissantes, surtout combinées aux transformations
• Cependant elles sont limitées : 2 états par propriété, ne s'appliquent que lors d'un événement
• Les CSS permettent également de créer de véritables animations :
  • autant d'états intermédiaires que nécessaire
  • propriétés complètement indépendantes
  • ne dépend pas d'un événement : peut se répéter n fois ou tourner en boucle, par exemple
• Voir le tutoriel de MDN