Bonjour, 

Je souhaiterais prolonger un hover sur un bloc une fraction de seconde. En effet lorsqu'on survole un élément avec un hover, l'animation se produit et arrive à son terme mais lorsqu'on ne le survole plus l'animation revient à son état initial tout de suite, n'y aurait-il pas un moyen de prolonger légèrement l'animation un peu après avoir "quitté" le survol ?

Merci d'avance

Bonjour,

Je pense que les transitions CSS sont la solution à ton problème : https://www.w3schools.com/css/css3_transitions.asp 

Non, justement. C'est précisément ça le problème, je maîtrise bien les transitions mais comme j'ai expliqué dans mon premier post lorsque l'on ne survole plus l'élément auquel on a assigné un :hover l'élément revient directement à sa position initiale, je voudrais que la transition de l'élément perdure un petit peu après avoir quitté le survol. Désolé si je n'ai pas été suffisamment clair. 

Il y a bien les @keyframes mais ce n'est pas un effet automatique que je veux, mais bien au survol. 

-
Edité par Huriiil B. 21 mars 2018 à 16:17:41

Hello,

Post ton code si tu veux qu'on t'aide.

Sinon, tu ne peux pas juste faire quelque chose comme ça ? https://jsfiddle.net/zh1ws4oe/1/

C'est dans le cas du déplacement d'un bloc, je souhaiterais que le bloc ne revienne pas à sa position initiale directement lorsque je quitte le survol mais légèrement après :

div {
			  position: relative;
			  background-color: red;
			  top: 0;
			  left: 50px;
			  width: 100px;
			  height: 100px;
			  transition: .2s ease-out 0s;
			}

			div:hover {
			  top: 50px;
			  left:50px;
			}

Désolé je suis pas clair

-
Edité par Huriiil B. 21 mars 2018 à 16:28:25

Dans ce cas il serait bien que tu nous montres un exemple de code que tu as réalisé. Il est possible que ta propriété transition ne soit simplement pas au bon endroit, elle est probablement dans le :hover au lieu d'être dans l'élément (voir l'exemple de MrChampy).

Huriiil B. a écrit:

Non, justement. C'est précisément ça le problème, je maîtrise bien les transitions mais comme j'ai expliqué dans mon premier post lorsque l'on ne survole plus l'élément auquel on a assigné un :hover l'élément revient directement à sa position initiale, je voudrais que la transition de l'élément perdure un petit peu après avoir quitté le survol. Désolé si je n'ai pas été suffisamment clair. 

Il y a bien les @keyframes mais ce n'est pas un effet automatique que je veux, mais bien au survol. 

-
Edité par Huriiil B. il y a 6 minutes

Mewen_bzh a écrit:

Dans ce cas il serait bien que tu nous montres un exemple de code que tu as réalisé. Il est possible que ta propriété transition ne soit simplement pas au bon endroit, elle est probablement dans le :hover au lieu d'être dans l'élément (voir l'exemple de MrChampy).

Huriiil B. a écrit:

Non, justement. C'est précisément ça le problème, je maîtrise bien les transitions mais comme j'ai expliqué dans mon premier post lorsque l'on ne survole plus l'élément auquel on a assigné un :hover l'élément revient directement à sa position initiale, je voudrais que la transition de l'élément perdure un petit peu après avoir quitté le survol. Désolé si je n'ai pas été suffisamment clair. 

Il y a bien les @keyframes mais ce n'est pas un effet automatique que je veux, mais bien au survol. 

-
Edité par Huriiil B. il y a 6 minutes

Non, rien à voir ce n'est pas du tout le sens de ma question, je ne fais jamais cette erreur, je souhaite que l'élément déplacé reste un peu à sa position après avoir quitté le :hover 

Et bien il marche ton code la, non ?

Ou alors, tu voudrais que l'élément reste fixe un moment quand tu quitte le hover, puis entame sa transition de .2s peut être ?

MrChampy a écrit:

Et bien il marche ton code la, non ?

Ou alors, tu voudrais que l'élément reste fixe un moment quand tu quitte le hover, puis entame sa transition de .2s peut être ?

Non non, que la transition se fasse normalement puis que l'élément reste fixe un petit moment après que j'ai quittté le :hover.

Oui, c'est ce que je viens de dire quoi 

Enfin c'est ce que je pensais en tout cas.

Tente un truc comme ça du coup : https://jsfiddle.net/zh1ws4oe/3/

Je comprend pas ce qu'il se passe là et je n'ai jamais vu de transition dans un :hover mais ça fonctionne bien... Tu peux m'expliquer ?

En gros le 0s dans le :hover représente le delay de ton animation au survol (0 ici, elle démarre de suite).

Le 2s représente le delay à l'état normal, état qui est actif lorsqu'on quitte le survol.

Oui je sais que les 0s en fin de déclaration correspondent au délai de lancement de la transition mais je comprend pas en quoi cela influence le retour de l'élément, je n'arrive pas à me le représenter =/

Ben tu as deux animations en gros, qui sont similaires, et une démarre avec un delay, ce qui te fait croire à un "retour" en retard, alors qu'en fait, c'est la 2e animation qui démarre avec un delay quand tu quittes le :hover.

MrChampy a écrit:

Ben tu as deux animations en gros, qui sont similaires, et une démarre avec un delay, ce qui te fait croire à un "retour" en retard, alors qu'en fait, c'est la 2e animation qui démarre avec un delay quand tu quittes le :hover.

Je vois, merci beaucoup. Et c'est viable ? Ça risque pas de générer des bugs une animation dans le :hover ?

Ça c'est à vérifier, je n'utilise quasiment jamais cette propriété.

Après tu peux aussi passer par du JS et comparer les deux.

C'est justement parce que je ne maîtrise pas encore JS que j'essaie de trouver des solutions plus simple pour l'instant.

Merci beaucoup pour tes réponses

Et merci Mewen_bzh d'avoir essayé

-
Edité par Huriiil B. 21 mars 2018 à 17:30:06