Formation CSS3

Les animations

Les transitions

Les transitions permettent la passage progressif d'un état CSS de départ vers un état CSS d'arrivée.
Toutes les propriétés continues supportent les transitions :
- couleurs,
- géométrie...
La transition se contrôle :
- en propriétés concernées,
- en durée,
- en linéarité temporelle.

Les pseudo-classes :hover permettent de faire facilement des tests de transition par déplacement du curseur.

Les propriétés des transitions

Les propriétés contrôlant les transitions sont :
- transition-property permet de sélectionner les propriétés concernées par la transition :
  - les valeurs associées sont les noms des propriétés séparés par des ,,
  - le mot clef all sélectionne toutes les propriétés.
- transition-duration indique la durée totale de la transition. Elle est exprimée en secondes suffixée par s,

Les propriétés des transitions

Les propriétés contrôlant les transitions sont :
- transition-timing-function indique le type d'évolution qui sera appliquée. Celle-ci accepte les valeurs :
  - linear pour une évolution linéaire,
  - ease pour une évolution amortie en début et en fin,
  - ease-in ou ease-out pour une évolution amortie au début ou à la fin,
  - cubic-bezier permet de définir l'évolution par une courbe de bezier qui recevra 4 paramètres.

Les navigateurs n'acceptent pas encore ces propriétés dans la forme normalisée, en revanche chrome, firefox et opera acceptent la forme propriétaire préfixée respectivement par -webkit-, -moz- et -o-.

Les propriétés des transitions

Contrôle du temps par fonction reposant sur courbe de bezier

Les paramètres transmis à la fonction par cubic-bezier(x1,y1,x2,y2) seront les coordonnées x1,y1 de P1 et x2,y2 de P2. Ces valeurs devront être comprises entre 0 et 1.

Les propriétés des transitions

La forme condensée est autorisée par la propriété transition

Exemple de transition appliquée aux titres h1 et aux titres h2 :

h1 {
  transition-property:color,background-color;
  transition-duration:3s;
  transition-timing-function:
                  cubic-bezier(0,1,1,0);
}
h2 {
  transition:all 5s linear;
}

Exemple de transition

Exemple utilisant le :hover :

h1 {
  /* transitions en 3 secondes amortie en début et fin */
  transition:all 3s ease;
  color:#000;            /* texte en noir */
  background-color:#FFF; /* fond blanc */
  width:50%;
}

h1:hover {
  color:#FFF;            /* texte en blanc */
  background-color:#000; /* fond noir */
  /* faire 2 tours et grossir X2 */
  transform: rotate(720deg) scale(2);
}

Au survol du titre h1 par le curseur, celui-ci effectuera 2 tours en 3 secondes et passera en négatif en devenant 2 fois plus gros.

Les animations

Comme les transitions, les animations permettent la passage progressif d'un état CSS de départ vers un état CSS d'arrivée.
Elle se déclenchent sans intervention extérieure.
Elles nécessitent de propriétés spécifiques au lancement :
- une animation sera définie par des règles de style spécifiques,
- les éléments CSS pourront se voir affecter une animation.

Définition de l'animation

La directive @keyframes nom_anim {...} permet de définir la séquence de l'animation.
Le nom nom_anim permettra d'affecter cette animation à des sélecteurs CSS.
La séquence contiendra des déclarations de style qui pourront être :
- from {...} pour le début de l'animation,
- to {...} pour la fin de l'animation,
- Num% {...} pour une étape intermédiaire correspondant à un pourcentage de l'avancement de l'animation.
Chaque étape pourra être contrôlée en linéarité par animation-timing-function.

Exemple d'animation

Exemple d'animation à 3 étapes :

@keyframes mon_animation {
    from {
      animation-timing-function:ease-in;
      background-color:#F00;
    }

    50% {
      background-color:#0F0;
    }

    to {
      animation-timing-function:ease-out;
      background-color:#00F;
    }
  }

Affectation d'animation

Une animation est affectée à un sélecteur en utilisant les propriétés :
- animation-name pour affecter une nom,
- animation-duration pour affecter la durée totale de la séquence,
- animation-timing-function pour affecter la linéarité de la séquence,
- animation-delay pour retarder le départ de la séquence,
- animation-iteration-count pour indiquer le nombre d'exécutions,
- animation-direction pour indiquer le sens d'exécution normal ou alternate.

animation-direction imposera à l'animation de se faire dans le sens inverse après chaque parcours de la séquence.

Exemple d'affectation

Exemple d'affectation de l'animation mon_animation précédemment déclarée :

div {
    animation-name:mon_animation;
    animation-duration:5s;
    animation-iteration-count:4;
    animation-delay:3s;
  }

Documentation

les spécifications du W3C sur les transitions : http://www.w3.org/TR/2009/WD-css3-transitions-20090320
les spécifications du W3C sur les animations : http://www.w3.org/TR/css3-animations