webkit flip animation position not always on middle

Question

i have this animation on my website fit-life.info

div.anim { -webkit-animation: flipInX 1.2s 0s ease forwards; -moz-animation: flipInX 1.2s 0s ease forwards; -o-animation: flipInX 1.2s 0s ease forwards; animation: flipInX 1.2s 0s ease forwards; opacity: 0; }

but some times some elements doesnt animate from the middle like this page post image http://fit-life.info/fitness/koiliako-lipos-kathimerina-lathoi-pou-prokaloun-tin-auksisi-tou-2/ i think my problem can be solved like the solution i have seen in this post How can I change the 'pivot-point' of this flip animation? but i dont know where i have to put the

transform-origin : center;

maybe my page is loading too fast and the javascript is getting the wrong element position?

Answer 1

The animations afterall was triggered with javascript. a script animates every tag that has the class animate changing the opacity from 0 to 1

Answer 2

You may need to include vendor(browser) prefixes, try adding:

-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;