CSS3 Übergänge, Keyframes, Animationen

Question

Ich habe mit Übergängen und Animationen herumgespielt, und ich wollte das Beste aus der Verwendung von Hover mit ihnen machen.

Ich habe mich gefragt, ob es möglich ist, Animation zu machen, nachdem man über sie hinweg gefahren ist, nicht unbedingt, während man darüber schwebt. Zum Beispiel, wenn ich möchte, dass ein Bild hineingleitet und die Deckkraft ändert, nachdem der zugehörige Absatz verschoben wurde, wie würde ich es erhalten, ohne die Maus des Abschnitts zu behalten?

Meine letzte Frage ist, ob etwas ähnlich wie Keyframes mit Übergängen verwendet werden kann. Ich bevorzuge Übergänge, weil sie zurück in den ursprünglichen Zustand übergehen, anstatt zurückzuschnappen.

Ich habe ein paar grundlegende Codebeispiele gemacht, und ich frage mich, wie ich sie erweitern kann. Hoffentlich helfen die Beispiele zu erklären, was ich zu erklären versuche.

jsfiddle

Says I need code to link jsfiddle 

Sie sind sehr einfach, die erste ist nur eine Animation (von links nach rechts), die ich einmal nach schwebend bleiben wollen.

Die zweite Übergang (von links nach rechts) ist, und ich frage mich, ob ich eine Animation ähnlich wie die Animation machen, dass es (von links nach rechts nach links)

Answer 1

ich die Geige here

aktualisieren folgt

"Von links nach rechts nach links" kann jedoch nicht durch Übergang erreichen. Da der Übergang nur den Startstatus und den Endstatus hat, kann er den mittleren Status nicht verarbeiten. Schau hier. https://developer.mozilla.org/en-US/docs/Web/CSS/transition

Sie können "von links nach rechts nach links" über Keyframes erreichen. Beispielsweise.

@keyframes slideRight { 
    0% { 
     margin-left: 0em; 
     } 
     50% { 
     margin-left: 2em; 
     } 
     100% { 
     margin-left: 0em 
     } 
    }