浏览器在CSS3过渡时表现不同

时间:2011-07-19 07:46:04

标签: css css3 cross-browser transform transitions

早上好。

今天我正在努力使用以下代码:source on jsFiddle

我一直试图实现的是一个看似简单的图像翻转效果,其中图像的“镜像”使用一些css3效果覆盖原始图像。

  • Chrome 12可完美转换图像
  • Firefox 5在图像运行到鼠标光标时停止转换
  • IE9 - 根本没有变形,图像只是摇晃
  • Opera - 未选中

如何进行跨浏览器兼容?

2 个答案:

答案 0 :(得分:1)

根据CanIUse.com,IE9不支持CSS3过渡,所以我想这就是为什么它在IE9中不适合你。

支持该功能的浏览器包括Firefox(来自v4),Chrome,Safari和Opera。但值得指出的是,转换目前在所有支持它们的浏览器中都需要供应商前缀。

供应商前缀意味着两件事之一:规范尚未最终确定,因此该功能可能会在语法上发生变化,否则浏览器自身对该功能的支持尚未被认为是完整的。

Chrome已经支持多年的转换,所以一切都在那里工作也就不足为奇了。 Firefox最近才添加它,因此它们需要供应商前缀,您应该将其视为警告,可能无法保证100%的工作。

答案 1 :(得分:1)

我想我可以按照你想要的方式在Firefox 5中使用它。见http://jsfiddle.net/X2eN6/7/