28119 sujets

CSS et mise en forme, CSS3

[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.
Smiley biggrin
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)
Voili voilà, bien sûr, mais c'était simple Smiley confus
Modifié par Bongota (29 Apr 2024 - 18:53)
Meilleure solution
Prévenir un modérateur
Répondre au sujet
Aller à