Question

我正在为网站上的标题设置动画，动画在Firefox中运行但不在Chrome中。

我在firefox中有正确的前缀，如果你使用这段代码并将前缀切换为moz，它在firefox中的动画效果绝对正常，那就是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似乎不喜欢多重过渡（不知道你为什么会在第一时间拥有它们），所以我不断删除所有不会做任何事情的事情，也就是所有那些持续0秒的事情。 Firefox似乎忽略了这些其他过渡值

Updated jsFiddle

此外，您需要使用transform-origin（以及webkit前缀版本）来获得所需的效果。对我来说，默认值似乎是top left，所以如果您希望Chrome看起来像那样，则需要将-webkit-transform-origin: top left;放入元素的hover CSS中

More information on transform-origin

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

1 个答案: