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

也许考虑使用无前缀，这样你就不必担心前缀了。