css - 如何将 2 个动画添加到 1 个关键帧

Question

我想在图像到达动画的一半后向鸡添加 transform : rotateY(180deg)...所以在其他情况下...我想创建一个简单的四处走动在动画播放一半后和动画结束时转身的鸡……它会再次转身并循环播放。 (就像一个会思考的人，所以他们会四处走动)

谁能帮帮我？这是我的示例代码:http://jsfiddle.net/a7eCn/4/

Answer 1

我想你只是忘了包括前缀和常量变换(所以它并不总是旋转)。这是我的无前缀副本 - http://jsfiddle.net/a7eCn/5/

@keyframes left-right {
  0% {left:140px; transform:rotateY(0);}
  50% {left:110px; transform:rotateY(0);}
  51% {transform:rotateY(180deg);}
  100% {left:140px; transform:rotateY(180deg);}
}

也许考虑使用 prefix free所以您根本不必担心前缀。