Anwenden einer CSS vor Animation verwandeln

Question

Ich habe folgende Situation:

#animation-target { 
 
    transform: rotate(90deg); 
 

 
    width: 50px; 
 
    height: 100px; 
 
    animation: peek-from-left 1000ms linear; 
 
} 
 

 
@keyframes peek-from-left { 
 
    0% { transform: translate(-100%, 0) } 
 
    100% { transform: translate(0, 0) } 
 
    }

<div id="animation-target"> 
 
    <img src="http://placehold.it/50x100"/> 
 
</div>

Die Transformation erst nach der Animation angewendet wird, aber ich brauche es um die andere Art und Weise zu arbeiten. Wie kann ich die Transformation zuerst machen lassen?

Answer 1

Sie legen eine Standardeigenschaft fest (Drehung um 90 Grad) und überschreiben dann die Drehung, wenn Sie die horizontale Verschiebung animieren. Sobald die Animation fertig ist, wird standardmäßig der ursprüngliche Status angezeigt.

Wenn Sie die Rotation beibehalten möchten, müssen Sie sie auch in der Animation angeben.

Das Problem dabei ist jedoch, wenn Sie eine Transformation drehen verwenden, ist die Breite jetzt die Höhe, damit der Ursprung Hack verwandeln :)

body { 
 
    margin: 0; 
 
} 
 

 
#animation-target { 
 
    transform: translate(100%, 0) rotate(90deg); 
 
    transform-origin: 50% 25%; 
 
    width: 50px; 
 
    height: 100px; 
 
    animation: peek-from-left 1000ms linear; 
 
} 
 

 
@keyframes peek-from-left { 
 
    0% { transform: translate(-100%, 0) rotate(90deg) } 
 
    100% { transform: translate(100%, 0) rotate(90deg) } 
 
}

<div id="animation-target"> 
 
    <img src="http://placehold.it/50x100"/> 
 
</div>