Accueil

Traduction

Tutoriel CSS3 - sommaire

Tutoriel CSS3 - 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.

Créer un diaporama uniquement en HTML & CSS

Par le passé il fallait utiliser javaScript.
En combinant transformations et transitions CSS on peut faire l'économie d'un script JS !

Le code de la page web

Les boites figure sont par défaut positionnées à gauche avec une taille très réduite.
Sur clic, la figure sélectionnée est positionnée en absolue avec un changement d'échelle de 3.

Aperçu dans un iframe

Cliquez successivement sur chaque miniature !
Surtout maintenez le clic durant au moins 3 secondes (durée de la transition).

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

Quand vous entendez "effet fondu" vous pensez utiliser jQuery et ses méthodes "fade".
Or dans l'exemple ci-dessous l'effet fondu est produit sans utiliser ce framework mais en combinant JS et CSS3.

Code de la page (extrait)

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

La fonction anonyme 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 !
En combinant JS natif et CSS3, on obtient une solution alternative à jQuery en matière d'effets visuels.