Comment créer une animation CSS inversée sur Mouseout ?

Animation inversée lors du retrait de la souris après le survol

Vous avez rencontré un problème en essayant de créer une animation inversée lors du retrait de la souris à l'aide d'animations CSS . Examinons le problème et proposons une solution optimale.

Dans votre code initial, vous avez utilisé une simple animation de transformation CSS avec une propriété "rotate", et les images clés "in" et "out" devaient "to" valeurs pour définir la rotation. Cependant, lorsque vous utilisez l'animation @keyframes, vous devez spécifier à la fois les valeurs « de » et « à » dans les images clés pour créer un effet de transition.

La solution optimale, qui intègre votre besoin d'itérations et d'animation, est de réviser les règles des @keyframes comme suit :

Avec ce code, l'image clé "in" part d'une rotation nulle et passe à une rotation de 360 ​​degrés, tandis que le L'image clé "out" commence à partir d'une rotation de 360 ​​degrés et revient à une rotation nulle, créant l'effet inverse souhaité lors de la sortie de la souris.

Considérations sur la compatibilité du navigateur :

N'oubliez pas que CSS3 n’est pas pleinement appliquée universellement. Pour garantir la compatibilité entre navigateurs, vous devrez peut-être utiliser une syntaxe @keyframes différente pour différents navigateurs :

• Chrome, Safari (v5) : @-webkit-keyframes
• Firefox (v16 ) : @keyframes (v5-15 : @-moz-keyframes)
• Opéra (v15-22) : @-webkit-keyframes (v12 : @-o-keyframes)
• Internet Explorer (v10) : @keyframes

Pour améliorer davantage le code, vous peut également spécifier la durée de l'animation et le nombre d'itérations dans les règles CSS.

Voici un extrait de code qui les implémente améliorations :

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!