如何在1个关键帧中添加2个动画

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，这样你根本不必担心前缀。