Comment inverser les animations CSS lors de la sortie de la souris à l'aide de @keyframes ?

Comment implémenter une animation inversée lorsque la souris est sortie après un survol

Dans la conception Web, les animations jouent un rôle crucial dans l'amélioration de l'expérience utilisateur. Un scénario courant consiste à survoler un élément pour déclencher une animation, généralement une rotation. Cependant, inverser l'animation lors du retrait de la souris peut s'avérer difficile, en particulier lors de l'utilisation des @keyframes de CSS3.

Considérant l'exemple CSS fourni, où au survol, l'élément pivote à 360 degrés, l'objectif est de le faire revenir à 0. degrés à la sortie de la souris. En utilisant l'animation @keyframes, il semble que l'effet souhaité ne puisse pas être obtenu.

La solution réside dans la compréhension de la propriété animation-direction. "To" représente l'état final de l'animation, tandis que "from" spécifie l'état de départ. En incorporant le mot-clé « from » dans nos définitions @keyframes, nous pouvons créer l'animation inverse :

@keyframes in {
    from: transform: rotate(0deg);
    to: transform: rotate(360deg);
}

@keyframes out {
    from: transform: rotate(360deg);
    to: transform: rotate(0deg);
}

De plus, la compatibilité entre navigateurs peut être assurée en utilisant les préfixes des fournisseurs :

@-webkit-keyframes in {
    ...
}

@-webkit-keyframes out {
    ...
}

Pour améliorer davantage l'animation, il est crucial de spécifier la propriété animation-direction :

.class {
    animation-direction: alternate;
}

De cette façon, l'animation se déroulera de manière transparente transition de "in" à "out" lorsque la souris sort des limites de l'élément.

La mise en œuvre de cette approche aboutit à une animation inverse fluide et efficace qui répond avec précision aux mouvements de la souris. Voici une démonstration :

http://jsfiddle.net/JjHNG/35/

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!