Wie erstelle ich eine umgekehrte CSS-Animation bei Mouseout?

Umgekehrte Animation beim Herausfahren der Maus nach dem Bewegen des Mauszeigers

Beim Versuch, mithilfe von CSS-Animationen eine umgekehrte Animation beim Herausfahren der Maus zu erstellen, ist ein Problem aufgetreten . Lassen Sie uns das Problem untersuchen und eine optimale Lösung anbieten.

In Ihrem ursprünglichen Code haben Sie eine einfache CSS-Transformationsanimation mit einer „Rotate“-Eigenschaft verwendet, und die „In“- und „Out“-Keyframes mussten „to“ sein. Werte zur Definition der Drehung. Wenn Sie jedoch @keyframes-Animationen verwenden, müssen Sie sowohl „von“- als auch „bis“-Werte innerhalb der Keyframes angeben, um einen Übergangseffekt zu erzeugen.

Die optimale Lösung, die Ihren Bedarf an Iterationen und Animationen berücksichtigt, ist um die @keyframes-Regeln wie folgt zu überarbeiten:

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

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

Mit diesem Code beginnt der „in“-Keyframe bei der Nulldrehung und geht zu einer 360-Grad-Drehung, während der Der „out“-Keyframe beginnt bei einer 360-Grad-Drehung und kehrt zur Nulldrehung zurück, wodurch der gewünschte umgekehrte Effekt beim Herausfahren der Maus entsteht.

Überlegungen zur Browserkompatibilität:

Bedenken Sie, dass CSS3 wird nicht überall vollständig umgesetzt. Um die browserübergreifende Kompatibilität sicherzustellen, müssen Sie möglicherweise unterschiedliche @keyframes-Syntax für verschiedene Browser verwenden:

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

Um den Code weiter zu verbessern, haben Sie kann auch die Animationsdauer und die Anzahl der Iterationen innerhalb der CSS-Regeln angeben.

Hier ist ein Codeausschnitt, der diese implementiert Verbesserungen:

.class {
    animation-name: out;
    animation-duration: 2s;
}

.class:hover {
    animation-name: in;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

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

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

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine umgekehrte CSS-Animation bei Mouseout?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!