Question

我使用此转换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（我不明白为什么）。

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

Answer 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;

转换延迟不要单位（s秒），对于firefox是一个问题所以不读它的CSS（我认为出于同样的原因不起作用）在Chrome上）。所以为了解决这个问题，我们可以在没有transition-delay的情况下写一个过渡shorhand ：

 -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

＆＃34;过渡：转换＆＃34;不适用于桌面浏览器

1 个答案: