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

Question

我创建了一个 CSS 动画（飞猫），但是当我将位置设置为 %99 并将旋转 (transform: scaleX(-1)) 设置为 100% 时，猫从 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

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

CSS animation - make object rotate horizontaly at 100%

css

animation

keyframe