Heim > Web-Frontend > CSS-Tutorial > Wie erstelle ich eine umgekehrte CSS-Animation bei Mouseout?

Wie erstelle ich eine umgekehrte CSS-Animation bei Mouseout?

Susan Sarandon
Freigeben: 2024-12-08 10:11:10
Original
345 Leute haben es durchsucht

How to Create a Reverse CSS Animation on 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);
}
Nach dem Login kopieren

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);
}
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage