Accueil

Traduction

Tutoriel CSS - sommaire

Sommaire partiellement masqué - faites défiler !

Tutoriel CSS - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

CSS : les transitions avec CSS 3

Définition d'une transition

Il y a transition lorsque pour un élément HTML donné une ou plusieurs propriétés changent de valeurs (sur survol ou clic) non pas instantanément mais sur une certaine durée.
Pendant longtemps pour réaliser une transition il fallait recourir à JavaScript et en particulier à la libraire jQuery. Désormais depuis la version 3 de CSS on peut réaliser via deux règles de style grâce à la nouvelle propriété transition.

Les transitions : première approche

Survolez les images puis les boutons puis les boîte roses et observez ...

Boite définie avec la classe "box"

Le code HTML correspondant

Le code CSS correspondant

Transition sur les image : initialement les images sont quasi transparentes et petites.
L'image survolé devient totalement opaque et sa taille double.
La transition porte donc sur deux propriétés.

Dans le cadre de la transition sur les boutons la propriété transition-property a pour valeur all ce qui évite d'écrire : transition-property : background, color, box-shadow, font-size ; .
En effet la valeur all veut dire toutes les propriétés CSS citées dans la deuxième règle de style (celle avec le déclencheur de transition).

Dans le cadre de la transition sur la boite "box", j'utilise le raccourci "transition" avec un liste de paire "propriété durée" ; chaque paire séparée par une virgule. Notez que le raccourci "transition" est écrite dans la deuxième règle de style.

Les transitions CSS : approfondissements

Dans l'exemple précédent nous avons évoqué la méga propriété transition avec deux paramètres (propriétés concernées par la transition puis la durée de la transition).

Or le raccourci transition peut comprendre jusqu'à 4 paramètres OU il existe quatre propriétés préfixés "transition-".

Survolez successivement sur les différentes images puis observez ...



Le code HTML correspondant

Les images sont identifiées respectivement premiere, deuxieme, troisieme.

Le code CSS correspondant

J'utilise systématiquement le raccourci "transition".

Pour les trois images la transition dure 10 secondes.

Pour la première et troisième images la transition porte sur les propriétés width et opacity
Pour la deuxième image la transition ne porte que sur la propriété opacity. Donc l'agrandisseme de taille est instantané !

Pour la première image la transition sera lente au début et rapide à la fin (ease-in).
Pour la deuxième image la vitesse de transition sera constante (linear).
Pour la troisième image la transition est saccadée : par sauts (steps).

Pour les trois images la transition démarre 1 demi seconde après le chargement de la page (quatrième paramètre = 500ms).

Syntaxe de la méga propriété transition

Seuls les deux premiers paramètres sont obligatoires.
Par défaut le troisième paramètre vaut "ease" et le quatrième vaut 0s. Respectez l'ordre !

A la place du raccourci transition vous pouvez utiliser quatre propriétés préfixées "transition-" : transition-property, transition-duration, transition-timing-function, transition-delay.

Rythme de la transition

Revenons plus en détail sur le rythme de la transition.

<>Vous verrez plus loin les animations CSS. Pour définir le rythme de l'animation vous utiliserez les mêmes qualificatifs.

Appliquer un effet fondu à l'ensemble des images d'une page

Quand vous entendez effet "fondu" vous pensez utiliser le framework jQuery et ses méthodes "fade".
Or dans le premier exemple de cette page on obtient un effet "fondu" pour l'image survolée en créant une transition sur la propriété opacity.

Code de la page (extrait)

En combinanant une classe CSS et un script (code JavaScript) on applique un effet "fondu" à la collection des images.

Notez la classe nommée "effacer" définissant une transition de 5 s sur deux propriétés.

La fonction "feffacer" ajoute/ retire la classe "effacer" à toutes les images de la page.
J'ai en effet utilisé la méthode toggle() de l'objet classList qui ajoute ou retire (si elle existe déjà) la classe précitée.

Pour ceux qui ne comprennent rien au script. Sachez que vous trouverez dans ce site un tutoriel JavaScript pour débutants : Tuto JavaScript

Le rendu de ce code dans un iframe

Généralisons ! Vous savez maintenant appliquer un effet visuel à une collection d'éléments de même type. Il suffit de combiner une classe CSS avec un script.
Donc le couple JS & CSS évite souvent de recourir à un framework JS tel jQuery.