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/

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

因此，您的动画应如下所示：

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

并在每个transform-origin和.face1上定义不同的.face2。

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

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

1 个答案: