Ich habe einen CSS3-Übergang, aber am Ende des Übergangs wird meine Rotation auf den normalen Zustand zurückgesetzt. Die HTML und CSS sind einfach:CSS3-Übergang behält die Rotation bei

HTML

<a href="#"><span></span>Test</a>

CSS

a { 
    text-decoration: none; 
} 
a span { 
    display: inline-block; 
    width: 25px; 
} 
a span:before { 
    content:'>'; 
    font-size: 10px; 
    font-weight: bold; 
    -webkit-transition: all 0.5s; 
    -moz-transition: all 0.5s; 
    -ms-transition: all 0.5s; 
    -o-transition: all 0.5s; 
    transition: all 0.5s; 
} 
a:hover span:before { 
    margin-left: 55%; 
    -webkit-transform: rotate(-90deg); 
}

Der Übergang als außer ganz am Ende der Animation der Rotation setzt in dem Normalzustand zu erwarten geht anstatt zu bestehen. Ich habe eine JSFiddle as an example erstellt. Wie kann ich meine Rotation beibehalten?

Quelle

2014-09-04 Howdy_McGee

Bitte klären Sie das Problem richtig ... –

Rotation ist nur hier, wenn der Status schwebt. nichts falsch mit deinem Code glaube ich. Wenn Sie die Rotation/den Rand beibehalten möchten, wenn der Hover-Status verloren geht, können Sie animation und forwards verwenden :) –

@ C-linkNepal Ich bin uhh, ich bin nicht sicher, wie das noch zu klären ist - die css Rotation wird zurückgesetzt Am Ende des Übergangs und ich habe ein Live-Beispiel zusammen mit meinem Code zur Verfügung gestellt ... –

Versuchen Hinzufügen display: inline-block wie folgt aus:

a:hover span:before { 
    margin-left: 55%; 
    -webkit-transform: rotate(90deg); 
    display: inline-block; 
}

fiddle.

Erläuterung.

Die Pseudoelemente, wie :before oder :after sind inline, standardmäßig so haben sie Probleme mit umgewandelt werden, so müssen Sie sie display: block oder display: inline-block einzustellen.

Quelle

2014-09-04 14:15:20

Beat mich dazu :) – verism

Bitte, fügen Sie einige Erklärung, damit andere Leute mit diesem Problem von dieser Lösung profitieren. – LcSalazar

@LcSalazar Ich habe die Erklärung hinzugefügt. –

Seine Arbeits Mit dieser Methode

nicht margin Verwenden Sie für die Animation translate istead verwenden.
für bessere glatte Übergänge

Demo

html

<a href="#"><span>></span>Test</a>

Css

a { 
    text-decoration: none; 
} 
a span { 
    display: inline-block; 
    width: 25px; 
} 
a span{ 
    font-size: 10px; 
    font-weight: bold; 
    -webkit-transition: all 0.5s linear; 
    -moz-transition: all 0.5s linear; 
    -ms-transition: all 0.5s linear; 
    -o-transition: all 0.5s linear; 
    transition: all 0.5s linear; 
} 
a:hover span{ 
    -webkit-transform: rotate(-90deg) translateX(50%); 
    -moz-transform: rotate(-90deg) translateX(50%); 
    -ms-transform: rotate(-90deg) translateX(50%); 
    -o-transform: rotate(-90deg) translateX(50%); 
    transform: rotate(-90deg) translateX(50%); 
}

Quelle

2014-09-04 14:23:24 Suresh

auf der Demo haben Sie 4 Mal "-Webkit-Transform" –

in Ordnung danke aktualisiert! – Suresh

CSS3-Übergang behält die Rotation bei

Antwort

Seine Arbeits Mit dieser Methode

Demo

Verwandte Themen