Admin/Dev

Dans notre premier article, nous avions pu voir comment animer un petit peu nos éléments HTML avec des transitions animées lors d'un changement d'état.

Cette première partie devrait suffire à créer des animations rapidement, comme c'est d'ailleurs le cas sur ce site, sur les liens et menus. Il est cependant possible d'aller plus loin, nous permettant de simplifier le code CSS lorsque c'est possible, mais aussi de personnaliser encore plus nos animations.

Propriété clé "all"

Nous avons précédemment appliquer nos transitions à la couleur de fond, ainsi qu'à l'opacité. Et puis si vous avez suivi mes conseils, vous avez aussi peut être ajouter avec des changements de taille ou de position.

Lorsque l'on souhaite appliquer la même durée à toutes les propriétés, il n'est pas nécessaire de toutes les écrire. A travers le mot clé "all", il est possible d'indiquer au navigateur qu'il peut animer toutes les propriétés qui sont animables, c'est à dire, qui disposent d'un état de départ et d'un état d'arrivée différent.

Si je reprends notre exemple précédent, et en partant du principe que nous souhaitons une animation unifiée, nous pouvons simplifier en écrivant :

.transitionTest {
position:absolute; left:100px; top:100px; width:100px; height:100px; background:#CC3333; opacity:1; transition:all 0.5s;
}
.transitionTest:hover {
background:#3333cc; opacity:0.2; 
}

Comme il n'y a que les propriétés background et opacity qui disposent d'un état d'arrivée différent, ce seront les seuls à être animés.

A noter qu'il existe aussi une propriété "none", qui permet d'annuler les transitions.

Paramètres additionnels

Nous avons créé des animations en indiquant la propriété à animer, et la durée de l'animation, nous écrivions notre transition ainsi

.maClasseCSS { transition:-propriete- -duree-; }

mais il existe deux autres paramètres, optionnels, qui permettent d'affiner notre animation.

Voyons cela plus en détail.

Le troisième paramètre est certainement le plus complexe mais aussi le plus intéressant puisqu'il permet de modifier le calcul des étapes intermédiaires. Cela se passe à travers des fonctions mathématiques à indiquer dans la transition. Il existe actuellement 2 fonctions utilisables : steps et cubic-bezier.

Fonction steps

La fonctions steps va créer des paliers sur lesquels l'animation fera une pause. Ajoutons une fonction steps à notre carré, déjà sacrément torturé, et rallongeons un peu la durée, pour avoir le temps de voir le résultat.

.transitionTest {
position:absolute; left:100px; top:100px; width:100px; height:100px; background:#CC3333; opacity:1;
transition:all 1s steps(4);
}
.transitionTest:hover {
background:#3333cc; opacity:0.2;
}

Vous remarquerez qu'il y a un micro-délai avant l'exécution de l'animation, c'est parce que le navigateur considère l'étape de départ comme un palier à part entière. Il est possible d'indiquer au navigateur que l'on ne souhaite pas que l'étape de départ soit un palier, dans ce cas là, c'est l'étape d'arrivée qui en sera un. Mais dans notre cas, cela sera transparent.

.transitionTest {
position:absolute; left:100px; top:100px; width:100px; height:100px; background:#CC3333; opacity:1;
transition:all 1s steps(4,start);
}
.transitionTest:hover {
background:#3333cc; opacity:0.2;
}

A la place de start, nous pourrions écrire end, qui est la valeur par défaut et qui reviendrait à notre premier essai.

Fonction cubic-bezier

La seconde fonction, cubic-bezier, est un peu plus complexe que la première, puisqu'il s'agit de calculer les valeurs selon une courbe de Bézier cubique.

Pour en savoir plus sur les courbes de Bézier cubiques, je vous invite à vous rendre sur la page Wikipedia dédiée.

Nous allons nous focaliser ici sur le strict nécessaire pour pouvoir faire fonctionner nos transitions de manière ultime. Comme indiqué sur la page, quatre points définissent une courbe de Bézier cubique. Sachant que les points de départ et d'arrivée sont l'étape 0 et l'étape finale de notre transition soit les points (0, 0) et (1, 1), nous ne devons lui indiquer les deux points intermédiaires (abscisses et ordonnées) qui construiront la courbe. Les valeurs sont en général des numériques entre 0 et 1, mais il est possible, pour les ordonnées uniquement, de sortir de ce cadre.

Et si nous réalisions quelques transitions personnalisées, afin de mettre en application cette théorie pas forcément simple à comprendre au premier abord.

Pour réaliser une ligne droite, c'est facile, il suffit d'avoir deux points identiques aux valeurs de départ et d'arrivée

.transitionTest {
position:absolute; left:100px; top:100px; width:100px; height:100px; background:#CC3333; opacity:1;
transition:all 1s cubic-bezier(0, 0, 1, 1);
}

finalement, pour obtenir cette linéarité dans la fonction il suffit d'avoir deux points dont les ordonnées sont égales aux abscisses. Cette nouvelle fonction aura le même résultat

.transitionTest {
position:absolute; left:100px; top:100px; width:100px; height:100px; background:#CC3333; opacity:1;
transition:all 1s cubic-bezier(0.25, 0.25, 0.75, 0.75); 
}

Pour réaliser un départ plus en douceur, il suffit de réduire l'ordonnée du premier point

.transitionTest {
position:absolute; left:100px; top:100px; width:100px; height:100px; background:#CC3333; opacity:1;
transition:all 1s cubic-bezier(0.45, 0.05, 0.75, 0.75); 
}

Note: n'hésitez pas à augmenter la valeur de la durée pour avoir un peu plus de temps pour aprécier le résultat.

Pour réaliser une arrivé plus en douceur, il faut, a contrario, augmenter l'ordonnée du second point

.transitionTest {
position:absolute; left:100px; top:100px; width:100px; height:100px; background:#CC3333; opacity:1;
transition:all 1s cubic-bezier(0.45, 0.05, 0.75, 0.95);
}

Pour obtenir une forte accélération en début de transition, il faut mettre des ordonnées fortes pour de petites abscisses.

.transitionTest {
position:absolute; left:100px; top:100px; width:100px; height:100px; background:#CC3333; opacity:1;
transition:all 1s cubic-bezier(0.1, 0.4, 0.3, 0.75);
}

ou alors en fin de transition, avec des petites ordonnées pour des valeurs d'abscisses élevées

.transitionTest {
position:absolute; left:100px; top:100px; width:100px; height:100px; background:#CC3333; opacity:1;
transition:all 1s cubic-bezier(0.7, 0.1, 0.8, 0.5); 
}

Enfin, en utilisant des valeurs négatives pour les ordonnées, on peut obtenir un effet de rebond assez sympathique, par exemple avec

.transitionTest {
position:absolute; left:100px; top:100px; width:100px; height:100px; background:#CC3333; opacity:1;
transition:all 1s cubic-bezier(0.25, -0.5, 0.75, 0.75);
}

Vous verrez que la couleur ira vers l'orange avant de repartir vers le bleu. Par contre, la valeur d'opacité, ne peux pas excéder 1, elle est donc bornée à cette valeur et ne profitera pas du rebond.
Cependant la descente vers l'opacité 0.2 commencera en même temps que le retour de la couleur.

Evidemment, si vous souhaitez le rebond sur la couleur de fin, il faut jouer sur la valeur du second point, en mettant une valeur supérieure à 1

.transitionTest {
position:absolute; left:100px; top:100px; width:100px; height:100px; background:#CC3333; opacity:1; transition:all 1s cubic-bezier(0.25, 0.25, 0.75, 1.5);
}
.transitionTest:hover {
background:#3333cc;
}

Comme les aspirines ne sont malheureusement pas fournies avec le tutoriel, nous allons nous arrêter là sur les courbes de Bézier cubique.

Heureusement pour nous, il n'est pas nécessaire de maitriser tout cela, puisqu'il existe des mots clés qui proposent des fonctions prédéfinies plus faciles, et plus rapides à mettre en oeuvre mais beaucoup moins funs, j'espère que vous en conviendrez !

Voyons quelques unes de ces fonctions prédéfinies :

• linear : il s'agit de la première courbe de Bézier que nous avons testé, et finalement, il s'agit de la valeur par défaut.

.transitionTest {
position:absolute; left:100px; top:100px; width:100px; height:100px; background:#CC3333; opacity:1;
transition:all 1s linear;
}
.transitionTest:hover {
background:#3333cc;
}

• ease : une courbe accélérant un peu plus au début, et un peu moins à la fin, il s'agit d'une valeur très communément utilisée, qui convient dans beaucoup de situations.
• ease-in : la transition démarre lentement puis accélère progressivement.
• ease-out : inverse de la précédente, la transition est rapide au début et ralentit vers la fin
• ease-in-out : il s'agit d'un mélange de ease-in sur la première moitié de la transition et de ease-out sur la seconde.

Heureusement pour nous le dernier paramètre (avec tout cela, vous l'aviez peut-être oublier, non ?), est extrèment simple. Il s'agit simplement d'insérer un délai avant l'execution de la transition.
Par défaut, cette valeur est égale à 0, puisque vous l'avez certainement remarquer, depuis le début les transitions démarrent immédiatement.

Ajoutons donc un petit délai pour tester :

.transitionTest {
position:absolute; left:100px; top:100px; width:100px; height:100px; background:#CC3333; opacity:1;
transition:all 1s linear 1s;
}
.transitionTest:hover {
background:#3333cc;
}

l'animation ne démarrera qu'après une seconde de pause.

Ecriture étendue

Comme pour de nombreuses autres propriétés CSS, telles que background ou  margin/padding, il existe une écriture étendue. Mais comme nous pouvons créer une transition sur plusieurs éléments à la fois, elle est finalement bien moins pratique que l'écriture condensée. Elle peut cependant être utile à certains, en mode cascading, par exemple, donc regardons cela de plus prêt.

La propriété transition est alors remplacée par les propriétés :

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

Reprenons notre exemple, avec uniquement la transition sur le background :

.transitionTest {
position:absolute; left:100px; top:100px; width:100px; height:100px; background:#CC3333; opacity:1; 
transition-property:background;
transition-duration:0.5s;
transition-timing-function:linear;
transition-delay:0;
}
.transitionTest:hover {
background:#3333cc;
}

C'est beaucoup plus long, et finalement moins lisible. Mais continuons, en ajoutant l'animation sur l'opacité.

.transitionTest {
position:absolute; left:100px; top:100px; width:100px; height:100px; background:#CC3333; opacity:1; 
transition-property:background, opacity;
transition-duration:0.5s, 1s;
transition-timing-function:linear, linear;
transition-delay:0, 0;
}
.transitionTest:hover {
background:#3333cc;
}

Il faut lister les valeurs dans l'ordre, afin qu'elle soit appliquée au bon élément. C'est la propriété transition-property qui définit l'ordre, mais aussi le nombre de valeur nécessaire à la création, sans erreur, de notre transition.

.transitionTest {
position:absolute; left:100px; top:100px; width:100px; height:100px; background:#CC3333; opacity:1; 
transition-property:background, opacity;
transition-duration:0.5s, 1s;
transition-timing-function:linear;
transition-delay:0, 1, 5;
}
.transitionTest:hover {
background:#3333cc; opacity:0.2;
}

Dans l'exemple ci-dessus, la liste de valeurs de transition-duration dispose du bon nombre d'éléments, aucun soucis. Pour transition-timing-function, nous n'avons qu'un seul élément, il sera donc appliqué à toutes les propriétés. Enfin, transition-delay dispose d'un élément de trop, cette dernière valeur sera tout simplement ignorée.

Toujours pas rassasiés ?

Une troisième partie arrive prochainement, toujours à propos des transitions, mais surtout comment les combiner avec du javascript pour faire des WebApp de folie.