Pourquoi une transition CSS avec facilité d'entrée et de sortie se comporte-t-elle en douceur au survol mais brusquement à la sortie de la souris ?

Énigme de transition Ease-In Ease-Out de transition CSS

Lors de l'application d'une transition à un élément à l'aide de la propriété all et d'une Avec la fonction d'assouplissement, comme le montre l'exemple fiddle (http://jsfiddle.net/garethweaver/Y4Buy/1/), l'élément évolue en douceur lorsque vous le survolez. Cependant, il revient brusquement lorsque vous quittez la souris. La question se pose de savoir pourquoi cela se produit et comment le résoudre.

La solution réside dans le ciblage de l'élément de base plutôt que simplement de la pseudo-classe :hover pour les propriétés de transition. En définissant la transition sur l'élément lui-même, elle s'applique à la fois à l'entrée et à la sortie de l'état de survol.

Exemple mis à jour

Le code CSS corrigé :

<code class="css">.img-blur {
  transition: all 0.35s ease-in-out;
}
.img-blur:hover {
  -moz-filter: blur(4px);
  -webkit-filter: blur(4px);
  filter: blur(4px);
}</code>

Avec cette modification, l'image évolue désormais en douceur dans les deux sens, s'ajustant au survol et sortant lorsque la souris quitte la zone de l'image.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!