Animations

Ouais je sais que la distiction entre "transition" et "animation" n'est pas immediatement claire quand on en parle, parce que dans le langage courant on pourrais dire que "les transitions sont un type d'animation, pusique ca bouge c'est anime".

Mais quand on parle de CSS, ce sont deux choses distinctes.

Une transition decrit comment notre element doit s'adapter quand on lui change ses proprietes.

Une animation est une choregraphie de changements que l'on peut jouer, arreter, avancer, reculer etc...

On creer une animation un peu comme on importe une police, sauf qu'on utilise @keyframes pour demarrer le bloc definissant l'animation.

Ci-dessous j'ai une animation avec un nom ridicule (pour vous montrer qu'on peut mettre le nom qu'on veux) qui decrit un depart avec une rotation nulle au debut puis un tour complet a la fin.

@keyframes spiiiiin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

#my-paragraph {
  animation-name: spiiiiin;
  animation-duration: 60s;
}

On remarquera deux choses.

1. Ce coup-ci on a animation-name plutot que transition-property parce que le nom que l'on specifie n'est pas le nom de la propriete a surveiller mais le nom de l'animation a jouer.
2. j'ai mis 60 secondes, c'est long!

Pourquoi 60 secondes? Parce que les animation, par defaut, se lancent quand la page s'ouvre, donc pour etre a peu pres sur que vous la voyez je vous laisse pas mal de marge. Si vous l'avez rate vous pouvez toujours recharger la page.

Mais bon, on va voir comment palier a ca tout de suite avec ...

animation-iteration-count

Comme avec les transitions, des proprietes aditionnelles.

animation-iteration-count permet de specifier combien de fois jouer l'animation, donc le bloc ci-dessous est exactement ce que l'on viens de voir sauf que l'animation va se jouer trois fois d'affile au chargement de la page.

@keyframes spiiiiin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

#my-paragraph {
  animation-name: spiiiiin;
  animation-duration: 60s;
  animation-iteration-count: 3;
}

C'est sympa, mais ce qui l'est encore plus est qu'on a une valeur speciale qui est infinite qui permet de decrire que l'animation se jouer en boucle

@keyframes spiiiiin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

#my-paragraph {
  animation-name: spiiiiin;
  animation-duration: 60s;
  animation-iteration-count: infinite;
}

animation-timing-function

Comme pour les transition, on peut definir l'acceleration et la decceleration de la vitesse de lecture. On peut avoir l'impression que notre animation infinie ci-dessus s'arrete a certains moment parce que la function de timing par defaut est ease. Si je met linear alors la vitesse de lecture restera constante plutot que d'approcher 0 aux alentours du debut et de la fin.

@keyframes spiiiiin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

#my-paragraph {
  animation-name: spiiiiin;
  animation-duration: 60s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

animation-direction

En plus de definir qu'une animation doit se jouer en boucle, c'est aussi pratique de pouvoir definir qu'une animation se joue un coup a l'endroit, un coup a l'envers.

Je vais raccourcir la duree de l'exemple pour que ce soit plus rapide de voir les va et viens.

@keyframes spiiiiin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

#my-paragraph {
  animation-name: spiiiiin;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: alternate;
}

animation-direction peut prendre les valeurs suivantes:

• normal : l'animation est jouee du debut a la fin
• reverse : l'animation est jouee de la fin vers le debut
• alternate : l'animation joue d'abord a l'endroit, puis a l'envers
• alternate-reverse ; l'animation joue d'abord a l'envers, puis a l'endroit

animation-fill-mode

Par defaut, les changements qu'applique une animation ne s'appliquent plus quand elle est finie

@keyframes black2red {
  0% {
    color: black;
  }
  100% {
    color: red;
  }
}

#my-paragraph {
  animation-name: black2red;
  animation-duration: 3s;
}

#my-second-paragraph {
  animation-name: black2red;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

animation-fill-mode peut prendre les valeurs suivantes :

• forwards : on va retenir les proprietes telles qu'elles sont dans la derniere etape jouee. (donc 100% si la direction est normal ou 0% si la direction est reverse)
• backwards : a l'inverse de forwards on gardera comme propriete finales les proprites du debut de l'animation (0% pour normal et 100% pour reverse)
• both : on va garder toutes les modifications de valeurs, chaque changement ecrasant les valeurs actuelles.

J'ai du mal a trouver une bonne explication pour l'usage de both, ca me parait etre un bon moyen de se retrouver avec pleins de valeurs qui sortent d'un peu nul part.

Spoink

Dans beaucoup de cas on voudrais que les elements s'animent quand ils arrivent dans notre champ de vision lorsequ'on scroll.

Pour ca je vous ai fait une petite librairie qui s'appelle SpoinkJS.

Un jour animation-timeline sera widely available par tous les navigateurs et on pourra jeter spoink a la poubelle.