CSS-Animation - Objekt horizontal horizontal auf 100% setzen

Question

Ich habe eine CSS-Animation (fliegende Katze) erstellt, aber wenn ich Position bei% 99 und Rotation (transform: scaleX(-1)) auf 100% setze, beginnt sich Katze bei 0% zu drehen und endet bei 100 %, Ich möchte Katze zwischen 99% und 100% rotieren lassen.

@keyframes move-ass { 
    0% {left: -250px} 
    50% {left: 250px;} 
    100% {left: -250px; transform: scaleX(-1)} 
} 

Hier ist fiddle.

Answer 1

Laut Ihrer Erklärung ist dies das, was Sie animieren möchten.

Drehen Animation sollte auf 50% sein.

body { 
 
    text-align: center; 
 
} 
 
.cat { 
 
    position: absolute; 
 
    top: 150px; 
 
    left: -250px; 
 
    background-image: url(https://s-media-cache-ak0.pinimg.com/originals/ee/dd/e5/eedde5a7ab6c65899c25028ee9224e13.gif); 
 
    background-size: cover; 
 
    width: 100px; 
 
    height: 200px; 
 
    animation: move-ass 10s infinite; 
 
} 
 
@keyframes move-ass { 
 
    0% {left: -250px; transform: scaleX(1)} 
 
    40% {left: 240px; transform: scaleX(1)} 
 
    50% {left: 250px; transform: scaleX(-1)} 
 
    100% {left: -250px; transform: scaleX(-1)} 
 
}

<div class="cat"></div>

Updated Fiddle