Änderung des Animations-Wiedergabezustands bei mehreren Animationen innerhalb eines Elements

Question

Ich habe einen Inhalt, den ich verschieben muss (necttoMove), und 2 Schaltflächen, um zu steuern, in welcher Richtung. Es ist wichtig, dass der Inhalt nicht mit mir zurückgesetzt wird, höre auf, über eine Schaltfläche zu schweben, also habe ich animation-play-state With! Button funktioniert einwandfrei, aber mit 2 Tasten reagiert der zweite nicht auf mein Schweben. Hier ist der Code.

.needToMove { 
    -webkit-animation-name: right, left; 
    -webkit-animation-duration: 20s, 20s; 
    -webkit-animation-timing-function: linear, linear; 
    -webkit-animation-iteration-count: infinite, infinite; 
    -webkit-animation-play-state: paused, paused; 
} 

@-webkit-keyframes left { 
    from {right: -100%;} 
    to {right: 0%;} 
} 
@-webkit-keyframes right { 
    from {left: -100%;} 
    to {left: 0%;} 
} 

.button1:hover ~ .needToMove{ 
    animation-play-state: running, paused; 
    -webkit-animation-play-state: running, paused; 
} 

.button2:hover ~ .needToMove{ 
    animation-play-state: paused, running; 
    -webkit-animation-play-state: paused, running; 
} 

Gibt es einen Weg, wie dies ohne Verwendung von Javascript zu tun? (Ich bin mir sicher, es wäre viel einfacher mit JS, aber zu diesem Zeitpunkt ist es wie meine heilige Mission, dies mit css zu machen).

Danke!

Answer 1

Scheint, als wäre der beste Weg, dies zu tun, nur die entsprechende Animation hinzuzufügen, je nachdem, über welche Schaltfläche Sie den Mauszeiger halten, anstatt sie beide anfänglich zu definieren.

So beginnen gerade aus mit:

.needToMove { 
    -webkit-animation-duration: 20s; 
    -webkit-animation-timing-function: linear; 
    -webkit-animation-iteration-count: infinite; 
} 

Definieren Sie Ihre Keyframe-Animationen, dann auf schweben fügen Sie einfach, welche Sie wollen:

.button1:hover ~ .needToMove{ 
    -webkit-animation-name: right; 
} 
.button2:hover ~ .needToMove{ 
    -webkit-animation-name: left; 
}