{"id":1777,"date":"2012-01-30T08:40:16","date_gmt":"2012-01-30T07:40:16","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=1777"},"modified":"2015-01-18T16:16:14","modified_gmt":"2015-01-18T15:16:14","slug":"transitions-css3-mouseover-mouseout","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/transitions-css3-mouseover-mouseout","title":{"rendered":"Les transitions en CSS3 – Mouseover et Mouseout sans JavaScript"},"content":{"rendered":"

Mani\u00e8re un peu originale d’aborder les transitions, j’ai lu un article en anglais il n’y a pas longtemps qui proposait d’\u00e9tudier les transitions sur l’\u00e9v\u00e9nement hover<\/code> en CSS.
\nPar d\u00e9faut, la transition sur cet \u00e9v\u00e9nement comme on a l’habitude de l’utiliser nous propose des effets \u00e9quivalents au «mouseover<\/code>» comme au «mouseout<\/code>».<\/p>\n

Nous allons voir assez simplement comment diviser en deux les effets de transitions pour proposer un effet au survol diff\u00e9rent de l’effet de transition au moment o\u00f9 la souris quitte l’\u00e9l\u00e9ment.<\/p>\n

Les propri\u00e9t\u00e9s CSS 3 demandent un pr\u00e9fixe pour les navigateurs (-moz-, -webkit-, etc.) que je n’ai pas pr\u00e9cis\u00e9 ici.<\/p>\n

Rappel sur transition<\/code> en CSS 3<\/h2>\n

Pour cr\u00e9er une transition en CSS 3, vous aurez besoin de plusieurs informations, dont : l’effet recherch\u00e9 (et sa correspondance en propri\u00e9t\u00e9 CSS), la dur\u00e9e et \u00e9ventuellement le sc\u00e9nario.
\nSur ce dernier point, il ne faut pas confondre transition<\/code> et animation (@keyframes<\/code>) en CSS 3 qui sont deux modules diff\u00e9rents.
\ntransition<\/code> permet tout de m\u00eame la r\u00e9alisation de mini sc\u00e9nario gr\u00e2ce \u00e0 la dur\u00e9e (transition-duration<\/code>) et le d\u00e9lais (transition-delay<\/code>), notamment.
\nVoici un exemple de syntaxe compl\u00e8te :<\/p>\n

div {\r\n   transition-property: width;\r\n   transition-duration: 2s;\r\n   transition-timing-function: ease-in;\r\n   transition-delay: .5s;\r\n}<\/code><\/pre>\n
Je ne vais pas refaire un article complet sur les d\u00e9tails de ces propri\u00e9t\u00e9s, il y en a un tr\u00e8s bien fait sur Alsacr\u00e9ations.com par Antoine Cailliau<\/a>.<\/p>\n
En reprenant les m\u00eames valeurs de notre pr\u00e9c\u00e9dent code, il est possible d’utiliser la propri\u00e9t\u00e9 raccourcie :<\/p>\n
div {\r\n   transition: width 2s ease-in .5s;\r\n}<\/code><\/pre>\n
Il est important de se souvenir de l’ordre pour ne pas inverser delay<\/code> et duration<\/code>.<\/p>\n
MouseEnter et MouseLeave identiques<\/h2>\n
Par d\u00e9faut, en utilisant cet exemple de code, le navigateur va comprendre qu’il doit appliquer le m\u00eame effet au survol de la souris que lorsque la souris quitte l’\u00e9l\u00e9ment.<\/p>\n
div {\r\n\twidth: 90px; height: 90px;\r\n\tbackground: #fff;\r\n\tborder: 20px solid #aaa;\r\n\tborder-radius: 30px;\r\n\t\/* transition pour les deux \u00e9v\u00e9nements *\/\r\n\ttransition: all 2s;\r\n}\r\ndiv:hover {\r\n\tborder-color: #333;\r\n\ttransform: rotate(1080deg);\r\n\tborder-radius: 50%;\r\n}<\/code><\/pre>\n
Ici l’animation sur l’\u00e9l\u00e9ment s’effectuera de la m\u00eame mani\u00e8re pour l’\u00e9tat hover<\/code> et lors du retour \u00e0 l’\u00e9tat initial, sur la couleur de la bordure, le rotation et l’arrondi des angles, selon les m\u00eames r\u00e8gles d\u00e9finies une unique fois par la propri\u00e9t\u00e9 transition<\/code>.<\/p>\n
D\u00e9monstration<\/a><\/p>\n
Une animation diff\u00e9rente au MouseLeave ou au MouseEnter<\/h2>\n
La pr\u00e9sence de la propri\u00e9t\u00e9 transition<\/code> sur div<\/code> affecte l’\u00e9l\u00e9ment \u00e9galement sur son \u00e9tat hover<\/code>. Il est donc normal que sans nouvelle d\u00e9claration de cette propri\u00e9t\u00e9 dans l’\u00e9tat hover<\/code>, la seule existante s’applique.
\nPour changer d’effets dans l’animation lorsque la souris survole l’\u00e9l\u00e9ment, il suffit d’\u00e9craser transition \u00e0 l’\u00e9tat hover<\/code>.
\nPour reprendre l’animation pr\u00e9c\u00e9dente uniquement lorsque la souris survole l’\u00e9l\u00e9ment, et effectuer une animation plus simple lorsqu’elle quitte l’\u00e9l\u00e9ment, voici un exemple de code :<\/p>\n
div {\r\n\twidth: 90px; height: 90px;\r\n\tbackground: #fff;\r\n\tborder: 20px solid #aaa;\r\n\tborder-radius: 30px;\r\n\t\/* transition quand la souris quitte l'\u00e9l\u00e9ment *\/\r\n\ttransition: border-radius 2s, border-color 3s;\r\n}\r\ndiv:hover {\r\n\tborder-color: #333;\r\n\ttransform: rotate(1080deg);\r\n\tborder-radius: 50%;\r\n\t\/* transition quand la souris survole *\/\r\n\ttransition: all 2s;\r\n}<\/code><\/pre>\n
Ce qui nous donne :
\nD\u00e9monstration<\/a><\/p>\n
Il est \u00e9galement possible d’envisager des animations diff\u00e9rentes pour toutes les pseudo-classes existantes<\/a> : hover<\/code>, focus<\/code>, target<\/code>, etc.<\/p>\n
En esp\u00e9rant que cette astuce vous soit utile \ud83d\ude09
\n\u00c0 bient\u00f4t !<\/p>\n
\n
Sources et liens utiles<\/h2>\n