Same css animation on different element with different transform-origin

Question

I have two elements with same animation but different transform orgin but they act in the same way.

.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
As you can see the second head act like the 1st ignoring the transform-origin on the .face2 css

How can I fix this?
Can I avoid to write 2 separated animation?

Answer 1

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

Just move the transform-origin from the eat animation to the .face1.

So, your animation should look like:

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

and define the different transform-origin on the each .face1 and .face2.

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

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

---

(having fun) If you want both faces synchronized, just add a 0.5s animation start delay on the second face. That looks better to me 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;
}

(I've added the .5s at the end)