Css动画不在chrome中工作，但在firefox中工作

Question

我正在为一个网站上的标题制作动画，动画在firefox中工作，但在chrome中不工作。

我在firefox中有正确的前缀，如果你使用这个代码并将前缀切换到moz，那么它在firebox中的动画效果绝对不错，下面是chrome的代码：

HTML

<div class="page-header-con">
  <div class="page-header">
    <h1><a href="#">test</a></h1>
  </div>
</div>

CSS

.page-header-con {
perspective: 100px;
}
.page-header:hover {
-webkit-transform: rotateX(360deg);
}
.page-header {
-webkit-transition: all 0s ease 0s, all 1s ease 0s, all 0s ease-in 0s, all 0s ease 0s;
-webkit-transform: rotateX(0deg);
}

我是不是错过了铬专用的东西？

Answer 1

Chrome似乎不喜欢多重转换（不确定为什么一开始会有它们），所以我一直删除了所有不会做任何事情的转换，也就是所有持续时间为0s的转换。Firefox似乎忽略了这些其他转换值

更新的jsFiddle

此外，您还需要使用transform-origin（以及带有webkit前缀的版本）才能获得您想要的效果。对我来说，Firefox中的默认值似乎是top left，所以如果你想让Chrome看起来像这样，你需要把-webkit-transform-origin: top left;放在元素的hover CSS中

有关transform-origin 的更多信息