DEVENIR-WEBMASTER.COM Log In
 40
download link W3C close

Les transitions CSS

Visiter ma chaine Youtube

# Qu'est ce qu'une transition CSS ? close

Une transition CSS est appliquée à  une propriété CSS. Il s'agit de faire transiter la valeur de la propriété d'une valeur de départ vers une valeur d'arrivée. Il s'agit de le faire lorsqu'un événement précis se produit et de le faire dans un temps donné.

Dans l'exemple ci-dessous on va faire transiter la couleur du background de l'orange vers le rouge en 2 secondes au moment du survol du curseur.

Schéma de principe d'une transition CSS

La boîte restera rouge tant qu'elle sera survolée. Elle redeviendra orange dès qu'elle ne le sera plus.

# Comment coder une transition ? close

Dans un premier temps on cible notre boîte. On dit que c'est la couleur du background qui va transiter. Pour ça on spécifie la valeur background-color à  la propriété transition-property. Au début ça peut créer une petite confusion car on se sert du nom d'une propriété en tant que valeur. Et ça c'est inhabituel.

On spécifie ensuite le temps de la transition en donnant la valeur de 2s à  la propriété transition-duration.

Il nous reste à  spécifier notre valeur de départ avec un classique background-color:orange;

Coder une transition état de départ

Dans un deuxième temps on sélectionne notre boîte lorsqu'elle est dans l'état survolée au moyen de la pseudo-classe :hover. Il nous suffit ici de spécifier la valeur d'arrivée background-color:red;

Coder une transition état d'arrivée

On peut remarquer que les deux états sont reliés au moyen de l'identificateur qui sert de sélecteur.

Survolez la boîte orange et son fond devient rouge. Notez bien que dès que le curseur ne survole plus la boîte la propriété revient vers sa valeur de départ.

# Le paramétrage complet d'une transition close

La propriété transition-delay vous permet de spécifier un temps qui se placera entre le moment où l'événement est déclenché et le moment du démarrage de la transition.

La propriété transition-timing-function vous permet de spécifier la manière avec laquelle vous choisissez de transiter. Vous pouvez transiter de manière linéaire, le faire pas à  pas ou bien en suivant une courbe de variation telle que celle ci-dessous qui est la valeur par défaut.

Courbe de variation de la transition avec la valeur ease

L'axe des X représente une variation de temps et l'axe des Y représente la variation correspondante en terme de valeur de propriété. Ici approximativement on voit qu'à  la moitié du temps (0.5) la valeur aura déjà  variée de quatre-vingts pour cent (0.8). Cela veut dire que notre transition va démarrer fort pour se terminer plus lentement.

Je vous renvoie à  la spec pour les valeurs de transition-timing-function car les possibilités sont nombreuses Timing Function

# Comment utiliser la propriété raccourcie transition close

La propriété raccourcie transition regroupe les propriétés transition-property, transition-duration, transition-delay et transition-timing-function.

Maintenez cliqué pour voir la transition

Transition CSS codée avec la propriété short-hand

Exemple

Vous pouvez spécifier plusieurs transition CSS sur plusieurs propriétés en les spécifiant à  la suite et en les séparant par des virgules.

Chaque propriété aura ses propres paramètres de transition. Les transitions vont démarrer en même temps sur les deux propriétés.

Ici la couleur du background mettra 500 millisecondes pour transiter et la taille de la police transitera en 2 secondes.

Mettez le focus dans un champ de saisie
Codage avec le raccourci transition pour plusieurs transitions

Exemple

# Quelles sont les propriétés sur lesquelles on peut programmer une transition ? close

Vous pouvez programmer des transitions sur toutes les propriétés pour lesquelles il est possible de calculer des valeurs intermédiaires par exemple des valeurs de couleur, d'opacité, de longueur, de pourcentage. Ici on a choisi les propriétés margin-left et font-size.

Exemple

Vous n'êtes pas obligé d'énumérer la liste des propriétés que vous voulez voir transiter. Pour cela utilisez le mot-clé all.

Code css avec le mot-clé all

# Quels sont les événements qui peuvent servir à  déclencher une transition ? close

Vous pouvez déclencher des transitions sur tous les événements récupérables en CSS au moyen des pseudo-classes : active, hover, focus, checked.

Transition sur la pseudo-classe checked

Exemple

# Comment manipuler les transitions CSS avec Javascript ? close

Dans le code HTML ci-dessous il y a une image et deux boutons. L'objectif est de créer un code CSS et un code Javascript pour qu'un clic sur un bouton fasse monter une transition et qu'un clic sur l'autre bouton fasse descendre la transition.

Par monter la transition j'entends que l'élément ciblé (ici l'image) transite de l'état de départ à  l'état d'arrivée.

Par descendre la transition j'entends que cet élément ciblé transite de l'état d'arrivée à  l'état de départ.

Code HTML de l'exemple transition avec une classe

Je veux qu'à  l'état de départ l'image soit transparente opacity:0; et qu'à  l'état d'arrivée l'image soit opaque opacity:1;

En CSS je code l'état de départ de ma transition en ciblant l'élément image. Je crée une classe img.opaque qui correspond à  mon état d'arrivée mais attention cette classe pour l'instant ne porte pas sur l'élément image.

Pour l'instant cette classe n'est pas utilisée.

Code CSS de l'exemple transition avec une classe

Je vais utiliser Javascript pour ajouter cette classe à  l'image lorsque qu'un clic se produit sur le bouton Ajouter la classe.

Ce clic va avoir pour effet de faire monter la transition et l'image va apparaître.

Un clic sur le bouton Supprimer la classe va enlever cette classe de l'image. La transition va descendre et l'image va disparaître.

Code JAVASCRIPT de l'exemple transition avec une classe

logo JAVASCRIPT

Manipuler ces boutons pour faire monter et descendre la transition

Cet exemple avec son code ici

# Un exemple de fondu enchaîné avec JQUERY close

Maintenant que nous savons manipuler les transitions en ajoutant et en supprimant des classes avec JAVASCRIPT nous allons faire un exemple de présentation d'images par fondu enchaîné.

Nous utiliserons JQUERY pour manipuler nos classes.

En HTML nous allons placer nos images dans un conteneur. Puis nous plaçons des éléments textuels encadrés par des span dans un paragraphe. Nous en ferons une liste de boutons.

Code HTML de l'exemple de fondu enchaîné

Le conteneur est positionné en relative de manière à  constituer un ancêtre positionné pour nos images que nous allons positionner en absolute. Les images sont initialisées transparentes opacity:0;. Une transition est demandée sur cette propriété. Une transition pour chaque image.

La classe opaque ayant été attribuée au logo CSS c'est lui qui sera visible au chargement de la page.

Code CSS de l'exemple de fondu enchaîné

On récupère en JQUERY un clic sur l'un quelconque des boutons. On supprime la classe opaque de toutes les images ce qui fait descendre la transition de l'image qui avait cette classe.

Puis on récupère l'index du span sur lequel s'est produit le clic et on vient ajouter la classe à  l'image du même index ce qui fait monter la transition sur cette nouvelle image.

On obtient de cette manière un effet de fondu enchaîné.

Code JQUERY de l'exemple de fondu enchaîné
log CSS logo HTML logo JS

CSS HTML JS

Cet exemple avec son code ici