Comment puis-je inverser les animations d'images clés CSS en douceur lorsque la souris est sortie ?

Inversion de l'animation lors de la sortie de la souris : Relever le défi

Dans le domaine de l'animation Web, réaliser une inversion d'animation fluide lors de la sortie de la souris peut être une entreprise délicate, en particulier lors de l’utilisation d’animations d’images clés. Explorons la question originale et sa solution, en approfondissant les subtilités des images clés CSS pour un résultat optimal.

Le problème

Comme indiqué dans l'enquête initiale, tenter de créer une animation de sortie de souris qui inverse l'animation de survol à l'aide d'images clés s'est avérée un défi. L'extrait de code montre une animation de rotation de transformation de base qui fonctionne au survol mais ne revient pas à son état d'origine lorsque la souris sort.

La solution

La clé pour y parvenir l'inversion d'animation souhaitée consiste à utiliser à la fois les propriétés "from" et "to" dans les déclarations d'images clés. En spécifiant l'état de transformation initial ("from") dans l'image clé "in" et l'état de transformation final ("to") dans l'image clé "out", nous créons effectivement une transition en douceur entre les deux.

Implémentation optimale

Pour garantir la compatibilité entre navigateurs, il est essentiel d'utiliser la syntaxe d'image clé correcte pour les différents navigateurs. Voici le code CSS mis à jour qui prend en compte ces considérations :

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

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

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

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

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

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

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

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

Ce code garantit que l'animation fonctionnera correctement dans les principaux navigateurs, offrant une expérience d'animation transparente qui passe en douceur du survol au non-survol. état.

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!