CSS动画 - 使对象在100％处水平旋转

我创建了一个CSS动画（飞猫），但是当我将位置设置为％99并且旋转（transform: scaleX(-1)）为100％时，猫开始以0％旋转并在100 ％，我想在99％和100％之间旋转猫。CSS动画 - 使对象在100％处水平旋转

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

这是fiddle。

来源

2016-04-05 NiKoLaPrO

根据你的解释，这是你想要的动画。

旋转动画应该占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

来源

2016-04-05 04:01:50 ketan

CSS动画 - 使对象在100％处水平旋转

回答

相关问题