Css Animations 不能在 chrome 中工作，但在 Firefox 中工作？答案

【问题标题】：Css Animations not working in chrome but working in firefox?Css Animations 不能在 chrome 中工作，但在 Firefox 中工作？
【发布时间】：2013-12-26 22:15:18
【问题描述】：

我正在为网站上的标题制作动画，动画在 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);
}

我是否缺少 chrome 专门需要的东西？

【问题讨论】：

在使用特定属性时设置不同的过渡效果很有意义。如果将它们全部设置为全部，您期望什么？
首先，你不需要多个all过渡项，在重复声明同一属性的过渡声明的情况下（在这种情况下，all），浏览器将只尊重最后一个系列中的一个：all 0s ease 0s。为什么要设置多次？全部是……嗯……全部，并且只需要一次。另外，您确定您还记得包含 non-prefixed 属性吗？版本 26 (blog.chromium.org/2013/02/chrome-26-beta-template-element.html) 中的 Chrome 无前缀 CSS 过渡现在仅响应 transition，没有 -webkit- 前缀。

标签： google-chrome firefox css-transitions css-animations css-transforms

【解决方案1】：

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

Updated jsFiddle

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

More information on transform-origin

【讨论】：

谢谢，您已经回答了我的问题。多次转换的原因是我的 SASS Mixin 正在复制它。需要解决这个问题！