Wie erstellt man einen Bild-Animationseffekt beim Hover?

Question

Sie möchten eine Art Akkordeoneffekt erzeugen, aber es sollte einen freigebenden Effekt haben, wie ich es im JSFiddle getan habe. Aber die CSS3-Animation ist fehlerhaft - wenn sie genau beachtet wird, taumelt das Bild und wird beim Schweben zentriert. Wie erreiche ich es reibungslos?

.accordion li .accordion-img { 
    position:relative; 
    height: 100%; 
    width: 100%; 
    transition: all 0.3s; 
    overflow: hidden; 
    left: 0; 
    right: 0; 
} 
.accordion li.active .accordion-img { 
    left: -15%; 
    width: 130%; 
} 

https://jsfiddle.net/sunrays/mzx7kaLd/

EDIT: Bild nicht sichtbar auf schweben bewegen. Kurz gesagt, ich versuche, Animationseffekt wie der 2. Abschnitt von https://www.airforce.com/

Answer 1

zu haben Verwenden Sie niemals links, oben, rechts, unten beim Animieren. Es erzeugt Störungen. Verwenden Sie stattdessen die transform: translate Eigenschaft.

Ich habe nur eine Zeile Code in der folgenden Klasse und die Änderungen sofort bemerken kann:

.accordion li.active .accordion-img { 
    transform: translate(-15%, 0px); 
    width: 130%; 
}