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

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

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

最佳答案

我认为您只是忘记了包含前缀和常量转换（因此它并不总是在旋转）。这是我的无前缀副本-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，所以您完全不必担心前缀。