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

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

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

正如您所见，第二个头部的行为与第一个头部类似，忽略了.face2 css上的变换原点

我如何解决这个问题？
我可以避免写两个分开的动画吗

只需将

transform origin

从

eat

动画移动到

.face1

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

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

并在每个

.face1

和

.face2

上定义不同的

变换原点

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

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


（玩得开心）如果希望两个面同步，只需在第二个面上添加0.5s动画开始延迟。我觉得这样更好

（我在末尾添加了.5s）

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