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

【问题标题】：Same css animation on different element with different transform-origin具有不同变换原点的不同元素上的相同 css 动画
【发布时间】：2014-02-11 10:41:19
【问题描述】：

我有两个元素具有相同的动画，但变换起点不同，但它们的行为方式相同。

.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个分开的动画吗？

【问题讨论】：

标签： html css transform css-animations css-transforms

【解决方案1】：

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

只需将transform-origin 从eat 动画移动到.face1。

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

@-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）

【讨论】：