CSSアニメーション - 100％で水平に回転するオブジェクトを作成する

Question

CSSアニメーション（飛行猫）を作成しましたが、％99で位置を設定し、回転（transform: scaleX(-1)）を100％に設定すると、catは0％で回転を開始し、100で終了します％、私は99％と100％の間で猫を回転させたい。

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

ここはfiddleです。

Answer 1

あなたの説明通り、これはアニメーション化したいものです。

回転アニメーションは50％にする必要があります。

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