Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Propriété transition

Une transition est une animation qui se produit lorsque la valeur d'une propriété est définie ou modifiée. Le passage de l'ancienne valeur à la nouvelle se fait alors de façon progressive.

transition est une propriété raccourcie permettant de définir en une seule fois toutes les propriétés relatives à une transition. Des transitions sur plusieurs propriétés peuvent être définies en les séparant par des virgules (voir l'exemple ci-dessous).

transition est une propriété raccourcie qui définit les valeurs des propriétés suivantes :

  • transition-property : définit la propriété qui sera soumise à la transition.
  • transition-duration : la durée de la transition. Cette valeur doit obligatoirement être définie pour que l'effet de transition soit visible.
  • transition-timing-function : une fonction de calcul qui définit une exécution non linéaire de la transition.
  • transition-delay : un temps d'attente avant que la transition-delay ne commence.

Voir également les possibilités de animation.

Transitions multiples.

Il est possible de définir plusieurs transitions sur un même élément. C'est le cas lorsqu'il est nécessaire d'animer plusieurs propriétés.

Chacune des propriétés relatives aux transitions peut alors comporter plusieurs valeurs séparées par des virgules. Exemple : le bloc ci-dessous a deux transitions définies, sur sa largeur, et sur sa hauteur. Un code Javascript modifie ces deux propriétés toutes les 5 secondes.

Les valeurs s'appliquent aux transitions dans l'ordre où elles ont été énumérées par la propriété transition-property, en fonction des règles suivantes :

  • La propriété qui sert de référence pour dénombrer les transitions est transition-property.
  • Si les autres propriétés ont un nombre de valeurs identiques, chacune de ces valeurs s'applique à une transition, dans l'ordre.
  • Si certaines propriétés ont plus de valeurs que de transitions énumérées par transition-property, les valeurs excédentaires sont ignorées.
  • Si certaines propriétés ont moins de valeurs que de transitions énumérées par transition-property, le navigateur affecte les valeurs en bouclant sur celles qui sont fournies. Dans le cas extrême, si une seule valeur est fournie, elle s'applique à toutes les transitions.

Exemple. Le code ci-dessous est à comprendre de la façon suivante :

transition-property: margin-left, margin-right; transition-duration: 3s, 5s; transition-timing-function: linear; transition-delay: 1s 2s 5s;
  • Deux transitions sont définies, une sur la marge gauche et l'autre sur la marge droite.
  • La durée pour la transition sur la marge gauche est de 3 secondes, celle pour la transition sur la marge droite est de 5 secondes.
  • Ces deux transitions auront une progression linéaire.
  • Le délai avant démarrage de 1 seconde est appliqué à la transition sur la marge gauche, celui de 2 secondes correspond à la transition sur la marge droite. Enfin, le délai de 5 secondes ne sera appliqué à aucune transition. Il sera ignoré.

Voir aussi...

Animation - Propriétés.

Animation - Directives.

Animation - Fonctions.

  • cubic-bezier() : Détermine une progression non linéaire pour les animations.
  • steps() : Définit une animation saccadée, pas par pas.