webkit翻转动画位置并不总是在中间

Question

我的网站上有这个动画：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; }

但是有些时候某些元素没有动画从中间开始像这样的帖子图片http://fit-life.info/fitness/koiliako-lipos-kathimerina-lathoi-pou-prokaloun-tin-auksisi-tou-2/ 我认为我的问题可以解决，就像我在这篇文章How can I change the 'pivot-point' of this flip animation?中看到的那样，但我不知道我要把它放在哪里

transform-origin : center;

也许我的页面加载太快而javascript的元素位置错误了？

Answer 1

您可能需要包含供应商（浏览器）前缀，请尝试添加：

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

Answer 2

动画完成后用javascript触发。脚本为具有类动画的每个标记设置动画，将不透明度从0更改为1