[Résolu] Ease-in-out

Bonjour,
depuis ce matin, je butte sur ça :

.icones {
	display:flex;
	max-width:14em;
	margin-left:8em;
	justify-content:space-around;
	overflow:hidden;}
.icones img {
	width:100%;
	height:auto;}
.icones img:hover {
	width:100%;
	transform:scale(1.2);
	transition:all .4s ease-in-out;}

Tout fonctionne, mais le retour est brusque, alors que l'aller est doux. Et pourtant, il y a "ease-in-out". Une idée ? J'ai la tête dedans et je ne vois peut-être pas le loup.

Plus la peine de chercher, j'avais oublié transition-duration: .4s; sur .icones img
Mais je ne comprends quand même pas pourquoi l'aller est doux sans cette ligne, alors que le retour est sec.

Bongota a écrit :
Mais je ne comprends quand même pas pourquoi l'aller est doux sans cette ligne, alors que le retour est sec.

Bonjour. C'est parce que tu as placé la transition sur le :hover, si tu veux dans les deux sens il faut placer la ligne sur l'élément de base :

.icones img {
  transition: all .4s ease-in-out;
}

Modifié par Olivier C (29 Apr 2024 - 17:47)