不同元素具有不同的变换原点的相同css动画

Question

我有两个具有相同动画但不同变换元素的元素，但它们的操作方式相同。

.face1 { 
    animation: eat .5s ease-in-out infinite alternate both; 
    -webkit-animation: eat .5s ease-in-out infinite alternate both; 
} 

.face2 { 
    animation: eat .5s 0s ease-in-out infinite alternate both; 
    -webkit-animation: eat .5s ease-in-out infinite alternate both; 

    -webkit-transform-origin: bottom right !important; 
    transform-origin: bottom right !important 
} 

This is a fiddle
正如你所看到的第二头的行为像第一次无视变换原点的.face2 CSS

我该如何解决这个问题？
我可以避免编写2个分离的动画吗？

Answer 1

http://jsfiddle.net/nbLhT/7/

刚从eat动画到.face1移动transform-origin。

所以，你的动画应该是这样的：

@-webkit-keyframes eat { 
    0% { 
     -webkit-transform: rotate(-7deg); 
    } 
    100% { 
     -webkit-transform: rotate(4deg); 
    } 
} 

，并确定在每个.face1和.face2不同transform-origin。

.face1 { 
    -webkit-transform-origin: bottom left; 
    transform-origin: bottom left; 
} 

.face2 { 
    -webkit-transform-origin: bottom right; 
    transform-origin: bottom right; 
} 

---

（玩乐）如果你希望同步两面，只是在第二面添加一个0.5秒的动画启动延迟。这看起来不如我 http://jsfiddle.net/nbLhT/8/

.face2 { 
    animation: eat .5s ease-in-out infinite alternate both .5s; 
    -webkit-animation: eat .5s ease-in-out infinite alternate both .5s; 
} 

（我已经添加在年底，5S）