“转换：转换”在桌面浏览器中不起作用答案

【问题标题】："transition: transform" doesn't work in desktop browsers“转换：转换”在桌面浏览器中不起作用
【发布时间】：2016-03-08 15:51:43
【问题描述】：

我使用这个过渡css3：

-webkit-transition: transform 250ms ease-out 0s;
-moz-transition: transform 250ms ease-out 0s;
-o-transition: transform 250ms ease-out 0s;
-ms-transition: transform 250ms ease-out 0s;
 transition: transform 250ms ease-out 0s;

它们在移动浏览器上运行良好（firefox 应用程序、chrome 应用程序、带有 iphone 9.2 的 safari）

但在桌面浏览器上不起作用（ff、chrome ecc）.. 怎么可能？

编辑

我用 jsfiddle 创建了一个例子：

https://jsfiddle.net/L9s3q34z/

我有一个带有那个 css3（过渡）的元素，然后我添加了一个事件 transform: rotate(-180deg)。通过这种方式，我可以旋转元素（它将是一个动画）。我在本地，在 jsfiddle 中尝试了这段代码并且工作正常。但是当我在我的网站上尝试此代码时，我遇到了桌面浏览器问题（Safari 除外）。

在我的网站中，我有 css 样式表，在里面我也有媒体查询（@media (min-width: 1025px) 和 @media (max-width: 1024px)），但是 css3（转换）不在媒体查询中。

我使用 firebug 分析了元素，但没有我向您展示的 css（我不明白为什么）。

但是使用移动浏览器（我的意思是移动应用程序而不是调整大小的桌面浏览器窗口）效果很好。

【问题讨论】：

define “不起作用” - 大概您正在应用转换？转换是由事件触发还是从一开始就存在？转换是在没有转换的情况下工作，还是转换本身不起作用？您的 CSS 中是否有任何可能导致差异的媒体查询（快速相关测试 - 如果您使窗口非常窄，转换是否有效？如果您使用例如 chrome 的移动仿真模式呢？）
嗯，它的工作原理：fiddle.jshell.net/oLqs3L6d 一个例子会很棒。
2 分钟我创建了一个 jsfiddle
您可以在问题编辑器中添加 sn-p 内联 - 比依赖外部站点更好
我不知道请添加一个sn-p inline

标签： css

【解决方案1】：

问题是 css 缩小，实际上在第一篇文章中显示的缩小 css 后变为：

-webkit-transition: transform 250ms ease-out 0;
-moz-transition: transform 250ms ease-out 0;
-o-transition: transform 250ms ease-out 0;
-ms-transition: transform 250ms ease-out 0;
 transition: transform 250ms ease-out 0;

transition-delay 没有单位（s 第二个），对于 firefox 来说是个问题，所以不要阅读它的 css（我认为出于同样的原因在 Chrome 上不起作用)。所以为了解决这个问题，我们可以写一个没有transition-delay的过渡简写：

 -webkit-transition: transform 250ms ease-out;
 -moz-transition: transform 250ms ease-out;
 -o-transition: transform 250ms ease-out;
 -ms-transition: transform 250ms ease-out;
  transition: transform 250ms ease-out;

Infact 现在在每个浏览器（桌面或移动）上都运行良好。我希望这个答案可以帮助其他用户。非常感谢，对不起我的英语；D

【讨论】：