La propriété transition-timing-function
Pour calculer les valeurs intermédiaires, le navigateur procède à une interpolation. La fonction calculant la valeur de cette interpolation influence directement la fluidité de l'animation.
Certaines animations sont plus rapides sur le début et ralentissent sur la fin, d'autres sont constantes dans leur vitesse (linéaires). Afin d'exprimer ces différents modèles d'animations, les spécifications introduisent une fonction de timing. Cette fonction de timing va traduire les nombres d'entrée (exprimés entre 0 et 1) en d'autres nombres (toujours compris entre 0 et 1). Cette traduction donnera différents rythmes à l'animation (par exemple d'accélération ou de décélération).
Les fonctions prédéfinies sont les suivantes :
- ease : Rapide sur le début et ralenti sur la fin.
- linear : La vitesse est constante sur toute la durée de l'animation.
- ease-in : Lent sur le début et accélère de plus en plus vers la fin.
- ease-out : Rapide sur le début et décèlere sur la fin.
- ease-in-out : Le départ et la fin sont lents.
Ces mots-clés sont des valeurs admissibles pour la propriété transition-timing-function. Les fonctions sont illustrées dans la figure suivante. Plus la courbe monte fortement et plus l'animation sera rapide sur cette portion.
La page d'exemple suivante permet de visualiser les différentes fonction de timing en action.
Pour aller plus loin : Les courbes de Bézier
Pour le lecteur curieux, il est possible d'utiliser des courbes de bézier définies sur un domaine compris entre 0 et 1. La fonction de bézier est simple à calculer et permet d'exprimer un grand nombre de variations des vitesses d'animations. A l'aide du mot-clé bezier(<number>, <number>, <number>, <number>) il est possible de préciser manuellement le détail de la courbe.
Pour en savoir plus, la page Wikipédia Courbe de Bézier fournit quelques explications.
D'un point de vue mathématique
Pour mieux comprendre ces fonctions, prenons un exemple simple : la fonction linéaire. Cette fonction retourne le nombre en entrée. Par exemple, nous souhaitons animer la couleur de fond d'une boîte d'un gris 30% à un gris 40% en 2 secondes. Pour illustrer, nous calculerons la valeur du gris après une seconde d'animation. Concrètement, le navigateur procède au même calcul pour un ensemble d'instant ; Plus il en calcule, plus l'animation paraîtra fluide.
Pour le calcul, nous commençons par ramener les deux secondes sur l'intervalle compris entre 0 et 1 de telle sorte que la valeur 0 corresponde au début de l'animation et 1 avec la fin. Ainsi, pour obtenir la valeur à l'instant 1 seconde, nous demanderons la valeur de la fonction pour la valeur 0.5. Dans notre exemple, la fonction de timing nous retournera 0.5. Une fonction de timing plus complexe retournera une valeur plus grande ou plus petite que 0.5.
Pour calculer la valeur du gris à appliquer, on reporte simplement l'intervalle qui nous intéresse sur l'intervalle [0, 1] afin de calculer la valeur à ajouter au début de l'intervalle. On a donc un intervalle 40% - 30% = 10% qui est reporté sur l'intervalle 0, 1. La valeur 0 vaut donc 30% et 1 vaut 40%. Nous cherchons la valeur à la position 0.5, d'où on a 0.5 x 10% = 5% , on a donc 30% + 5% = 35% comme valeur de gris.