Wie diese CSS Spin Animation

hier umgekehrt ist mein Code:Wie diese CSS Spin Animation

.dropdown:hover .arrow4{ 
    -webkit-animation: spin 0.3s linear; 
    -moz-animation: spin 0.3s linear; 
    -o-animation: spin 0.3s linear; 
    -ms-animation: spin 0.3s linear; 
    animation-fill-mode: forwards; 
} 
@-webkit-keyframes spin { 
    0% { -webkit-transform: rotate(0deg); } 
    100% { -webkit-transform: rotate(90deg); } 
}

Diese 90 Grad zum Spinnen auf den Pfeil sehr gut funktioniert, dann bleiben, aber wenn ich weg schweben in Position schnappt er zurück zu Zurückdrehen gegen .

Quelle

2016-11-01 Calum Reid

Könnten Sie bitte näher ausführen, was Sie versucht haben, bereits? Es hilft anderen zu helfen, Ihnen neue Ideen zu liefern, und verhindert gegenseitige Frustration über Lösungen, die Sie selbst erforscht haben. Außerdem protokolliert es dein Wissen, also trägst du zur Gemeinschaft bei. – Digitalis

Ich habe viel mit der Verwendung und Umkehr von "nach" und "von" Zeilen des Codes versucht, aber ohne Erfolg, die die Hauptmethode zu sein scheint ich cam –

@CalumReid Von dem, was ich verstehe, ist das Problem, dass Sie verwenden eine 'Animation', wenn Sie einen' Übergang' benötigen. – Ricky

Sie können die folgenden auf den Stil Standard verwenden

transform: rotate(0deg); 
transition: 0.3s;

und die folgenden auf den Schwebezustand

transform: rotate(90deg); 
transition: 0.3s;

Beispiel hier: https://jsfiddle.net/dt98evye/

Quelle

2016-11-01 22:45:32

das hat funktioniert! erlaubte mir auch, meinen Code viel aufzuräumen! Danke, ein Haufen –

Der 'Übergang: 0.3s;' im Hover-Zustand ist optional (es sei denn, ein anderer Timing-Wert ist für mouseleave erforderlich) –

@CalumReid Die Verwendung von 'Übergang' im': Hover'-Zustand ist in diesem Beispiel nicht notwendig. Vielleicht macht [** this **] (http://stackoverflow.com/a/38226571/4305494) die Dinge klarer. – Ricky

animation-fill-mode verwenden: beides;

Dadurch wird die Animation in beide Richtungen ausgeführt.

Quelle

2016-11-01 22:38:50 Ozoid

Ich habe es versucht, und es hat leider nicht funktioniert): –

Ich denke, das wird nicht auf den Hover-Befehl arbeiten, wie das gefeuert wird, wenn die Maus darüber schwebt, während Sie einen Weg suchen, den Fall zu behandeln, wo die Maus die verlässt Element. Versuchen Sie, einen separaten Selektor ohne Hover zu erstellen und verwenden Sie dort Ozoids Vorschlag. – Digitalis

danke für die Hilfe, es ist nicht unbeachtet, marks_c Antwort hat gut für mich funktioniert –

Wie diese CSS Spin Animation

Antwort

Verwandte Themen