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?

Jose Rui Santos · Accepted Answer · 2014-02-11 12:41:36Z

3

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)

edited Feb 11, 2014 at 12:41

answered Feb 11, 2014 at 12:19

Jose Rui Santos

15.3k9 gold badges61 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Same css animation on different element with different transform-origin

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related