Les transitions en CSS3 – Mouseover et Mouseout sans JavaScript

Manière un peu originale d’aborder les transitions, j’ai lu un article en anglais il n’y a pas longtemps qui proposait d’étudier les transitions sur l’événement hover en CSS.
Par défaut, la transition sur cet événement comme on a l’habitude de l’utiliser nous propose des effets équivalents au «mouseover» comme au «mouseout».

Nous allons voir assez simplement comment diviser en deux les effets de transitions pour proposer un effet au survol différent de l’effet de transition au moment où la souris quitte l’élément.

Les propriétés CSS 3 demandent un préfixe pour les navigateurs (-moz-, -webkit-, etc.) que je n’ai pas précisé ici.

Rappel sur transition en CSS 3

Pour créer une transition en CSS 3, vous aurez besoin de plusieurs informations, dont : l’effet recherché (et sa correspondance en propriété CSS), la durée et éventuellement le scénario.
Sur ce dernier point, il ne faut pas confondre transition et animation (@keyframes) en CSS 3 qui sont deux modules différents.
transition permet tout de même la réalisation de mini scénario grâce à la durée (transition-duration) et le délais (transition-delay), notamment.
Voici un exemple de syntaxe complète :

div {
   transition-property: width;
   transition-duration: 2s;
   transition-timing-function: ease-in;
   transition-delay: .5s;
}

Je ne vais pas refaire un article complet sur les détails de ces propriétés, il y en a un très bien fait sur Alsacréations.com par Antoine Cailliau.

En reprenant les mêmes valeurs de notre précédent code, il est possible d’utiliser la propriété raccourcie :

div {
   transition: width 2s ease-in .5s;
}

Il est important de se souvenir de l’ordre pour ne pas inverser delay et duration.

MouseEnter et MouseLeave identiques

Par défaut, en utilisant cet exemple de code, le navigateur va comprendre qu’il doit appliquer le même effet au survol de la souris que lorsque la souris quitte l’élément.

div {
	width: 90px; height: 90px;
	background: #fff;
	border: 20px solid #aaa;
	border-radius: 30px;
	/* transition pour les deux événements */
	transition: all 2s;
}
div:hover {
	border-color: #333;
	transform: rotate(1080deg);
	border-radius: 50%;
}

Ici l’animation sur l’élément s’effectuera de la même manière pour l’état hover et lors du retour à l’état initial, sur la couleur de la bordure, le rotation et l’arrondi des angles, selon les mêmes règles définies une unique fois par la propriété transition.

Démonstration

Une animation différente au MouseLeave ou au MouseEnter

La présence de la propriété transition sur div affecte l’élément également sur son état hover. Il est donc normal que sans nouvelle déclaration de cette propriété dans l’état hover, la seule existante s’applique.
Pour changer d’effets dans l’animation lorsque la souris survole l’élément, il suffit d’écraser transition à l’état hover.
Pour reprendre l’animation précédente uniquement lorsque la souris survole l’élément, et effectuer une animation plus simple lorsqu’elle quitte l’élément, voici un exemple de code :

div {
	width: 90px; height: 90px;
	background: #fff;
	border: 20px solid #aaa;
	border-radius: 30px;
	/* transition quand la souris quitte l'élément */
	transition: border-radius 2s, border-color 3s;
}
div:hover {
	border-color: #333;
	transform: rotate(1080deg);
	border-radius: 50%;
	/* transition quand la souris survole */
	transition: all 2s;
}

Ce qui nous donne :
Démonstration

Il est également possible d’envisager des animations différentes pour toutes les pseudo-classes existantes : hover, focus, target, etc.

En espérant que cette astuce vous soit utile 😉
À bientôt !