Transition CSS

Qu'est ce qu'une transition css

Les transitions css vont vous permettent d'obtenir des effets sur des éléments que vous allez survoler par exemple, sans y mettre la moindre ligne de code en JavaScript.

Ainsi, vous pourrez donner un effet d'opacité, décalage, un fondu etc à un bouton par exemple lors du survol de la souris. On parle de transition css hover.
Pour créer un site avec des belles transitions CSS, il faut prendre en compte 4 propriétés css qui permettront d'obtenir un effet vraiment sympa sur un élément ciblé.

Voir les exemples Accéder au code source

Les propriétés css à exploiter :

Pour construire une belle transition CSS, il faut prendre en compte 4 propriétés qui permettront d'obtenir un effet vraiment sympa sur les éléments de son site.

C'est grâce à ces 4 éléments compilés que l'on va pouvoir effectuer une belle transition en css 3 !
Voyons maintenant comment mettre tout cela en musique !

Rien de mieux qu'un exemple !

L'objectif est de modifier la dimension et la couleur de l'objet lors du survol de la souris. On appliquera un délai ou retard de 1 seconde. La durée de cette transition durera 2 secondes. Nous allons donc exploiter toutes les propriétés des transitions CSS. Un jeu d'enfant !

On vous doit une explication

<div class="element transition-width"></div>

.element {
	width: 110px;
	height: 110px;
	display: inline-block;
	background: #CCC;
	margin: auto 20px;
	cursor: pointer;
	}

.transition-width {	
    /* Syntaxe standard */
    transition-property: width, background;
    transition-duration: 2s;
    transition-timing-function: linear;
    transition-delay: 1s;
    
    /* Hack Safari */
    -webkit-transition-property: width, background;
    -webkit-transition-duration: 2s;
    -webkit-transition-timing-function: linear;
    -webkit-transition-delay: 1s;    
}

.transition-width:hover {
	width: 80%;
	background: #008ed6;
}

À noter que l'on peut condenser ces propriétés de transitions css en 2 lignes.

.transition-width {	
    transition: width,background, 2s linear 1s;
    -webkit-transition: width,background, 2s linear 1s;  
}

Pour conclure

Ne passez pas à côté des transitions css. Elles apportent de la dynamique et du sang neuf à votre site internet. Faciles à mettre en place, ces transitions ont l'énorme avantage de fonctionner sans l'appel d'un fichier javascript.

À noter que certaines versions de navigateurs ne tolèrent pas ces propiétés css. Cependant, cela n'impacte en rien le bon fonctionnement de votre site !