Comment inverser l'animation d'images clés CSS à la sortie de la souris ?

Animation inversée lors de la sortie de la souris après le survol à l'aide d'images clés

Vous cherchez une solution pour inverser l'animation de rotation lors de la sortie de la souris après le survol d'un élément. Bien que cela soit possible en utilisant les transformations CSS traditionnelles, vous avez rencontré des problèmes lors de leur implémentation avec l'animation @keyframes.

La solution optimale implique d'utiliser à la fois les valeurs « à » et « de » dans les images clés. Le code corrigé serait :

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

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

Cependant, il est important de considérer la compatibilité du navigateur. Bien que CSS3 soit largement pris en charge, il est recommandé d'utiliser les préfixes du fournisseur pour une compatibilité maximale :

@-webkit-keyframes in { /* Safari, Chrome */
    from: transform: rotate(0deg);
    to: transform: rotate(360deg);
}

@-webkit-keyframes out { /* Safari, Chrome */
    from: transform: rotate(360deg);
    to: transform: rotate(0deg);
}

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

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

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

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

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!