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％。

＆＃13;

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)}
}

＆＃13;

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

＆＃13;

<强> Updated Fiddle

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

1 个答案: