Accueil
Mes tutoriels sur la programmation

Tutoriel CSS - sommaire


Vous pouvez me contacter via Facebook (questions, suggestions) : page facebook relative à mon site

Mon site est gratuit pour les visiteurs (et sans publicité) mais sachez qu'il a un coût ...
Signé : l'auteur.

CSS : les transitions avec CSS3

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 à jQuery. Désormais depuis la version 3 de CSS on peut réaliser via deux règles de style.

Les transitions : première approche

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

Boîte créée avec la balise DIV
Boîte créée avec la balise DIV

Le code CSS et HTML correspondant

... img.exemple1{opacity : 0.2 ; width : 15% ; transition-property : opacity, width ; transition-duration : 2s ; } img.exemple1:hover {opacity : 1 ; width : 30% ;} button {display: block; background : skyblue ; transition-property : all ; transition-duration : 3s; } button:hover {color : red ; font-size : 140%; box-shadow : 5px 5px 5px grey ; background : navy; } .boite {display : inline-block ; margin : 1% ;width : 40% ; height:100px; background : pink; transition : all 4s;} .boite:hover {background : red ; box-shadow : 5px 5px 5px grey ; width : 80% ; height :200px;} ... <img src = '../images/brune_nue.jpg' class ="exemple1" /> <img src = '../images/jolie_fille.jpg'class ="exemple1" /> <button>bouton 1</button> <button>bouton 2</button> <div class ="boite">Boîte créée avec la balise DIV</div> <div class ="boite" >Boîte créée avec la balise DIV</div>

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 énumérée dans la deuxième règle de style (celle avec le déclencheur de transition).

Dans le cadre de la transition sur les boîtes DIV on utilise la méga propriété transition qui remplace les deux propriétés transition-property et transition-duration.
Donc il faut écrire dans la première règle de style : transition : all 4 s ce qui est quand même plus simple que :
transition-property : background, box-shadow, width, height ; transition-duration : 4s ;

Les transitions CSS : approfondissements

Dans l'exemple précédent nous avons évoqué la méga propriété transition mais avec uniquement 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 y a quatre propriétés préfixés "transition-".

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


Le code CSS & HTML correspondant

... #premiere{opacity : 0.2 ; width : 15% ; transition : all 10s ease-in 500ms ; } #premiere:hover {width : 45% ; opacity : 1 ; } #deuxieme{opacity : 0.2 ; width : 15% ; transition : opacity 10s linear 500ms ; } #deuxieme:hover {width : 45% ; opacity : 1 ; } #troisieme{opacity : 0.2 ; width : 15% ; transition : all 10s steps(4,start) 500ms ; } #troisieme:hover {width : 45% ; opacity : 1 ; } ... <body> ... <img src = '../images/tortue.jpg' id ='premiere'> <img src = '../images/toucan.jpg' id ='deuxieme'> <img src = '../images/palourde_royale.jpg' id ='troisieme'> ...

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

Pour les trois images la transition démarre au bout d'une demi seconde (500ms) et dure 10 secondes.

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

Pour la première image la transition sera lente au début et rapide à la fin (ease-in) alors que pour la deuxième image la vitesse de transition sera constante (linear) et 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.

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