1、兼容性

根据canius（http://caniuse.com/#search=transition），transition 兼容性如下图所示：

 <!DOCTYPE html>

 <html>

 <head>

 <style>

 div

 {

 width:100px;

 height:100px;

 background:blue;

 transition:width 2s;

 -moz-transition:width 2s; /* Firefox 4 */

 -webkit-transition:width 2s; /* Safari and Chrome */

 -o-transition:width 2s; /* Opera */

 }

 div:hover

 {

 width:300px;

 }

 </style>

 </head>

 <body>

 <div></div>

 <p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p>

 <p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

 </body>

 </html>

在IE7-9进行测试时，transition的效果没有过渡效果（如线性过渡效果），但是还是有效果（立即执行transition-property，transition-duration，transition-timing-function，transition-delay都不起作用）

CSS3 transition 浏览器兼容性的更多相关文章

  1. CSS3 选择器浏览器兼容性汇总 IE8

    1.css选择器 css(包括css1.css2和css3)有哪些选择器? http://www.w3school.com.cn/cssref/css_selectors.asp 2.CSS3选择器 ...

  2. HTML5、CSS3各浏览器兼容性

    推荐一个网站 [点这里] 在这个网站中可以给你所有Web特性在各个不同浏览器以及相同浏览器的不同版本的兼容性. 还可以显示使用各个版本的浏览器的使用比例. 首页中显示所有的H5.CSS3等特性.点进去 ...

  3. CSS3与页面布局学习笔记（八）——浏览器兼容性问题与前端性能优化方案

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  4. css3 transition属性

    最近打算学习css3知识,觉得css3写出来的效果好炫好酷,之前一直想要学习来着.可能之前的决心,毅力,耐心不够,所以想要重整起来,放下浮躁的心态,一步一个脚印,踏踏实实的来学习. 首先学习的是css ...

  5. 【转】CSS3 transition规范的实际使用经验

    原文转自:http://blog.jobbole.com/56243/ 本篇文章主要讲述CSS3 transition规范和在不同浏览器之间的使用差异,关于具体解决方法或如何规避问题的意见可以参考另一 ...

  6. CSS3 transition规范的实际使用经验

    本篇文章主要讲述CSS3 transition规范和在不同浏览器之间的使用差异,关于具体解决方法或如何规避问题的意见可以参考另一篇非常有见地的文章,“All You Need to Know Abou ...

  7. css3 transition animation nick

    时光转眼即逝,又到周六了,今天写点某部分人看不起的css玩玩! 转换 转换属性transform: 浏览器前缀: -webkit-transform;-o-transform;-moz-transfo ...

  8. CSS 多浏览器兼容性问题及解决方案

    兼容性处理要点1.DOCTYPE 影响 CSS 处理 2.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 ...

  9. 浏览器兼容性之Css篇

    本文与上一篇随笔<浏览器兼容性之Javascript篇>有一定关联,下来我会继续不断总结,旨在解决浏览器兼容性,对遇到类似问题的同仁有所帮助,如有更多解决浏览器兼容性的案例还望大家分享一起 ...

随机推荐

  1. [TensorFlow] Basic Usage

    Install TensorFlow on mac Install pip # Mac OS X $ sudo easy_install pip $ sudo easy_install --upgra ...

  2. WinForm DataGridView增删改查

    DataGridView连接数据库对表进行增删改查 一.绑定数据源 //做一个变量控制页面刷新 ; public Form1() { InitializeComponent(); } private ...

  3. BOM之history对象

    前面的话 history对象保存着用户上网的历史记录,从窗口被打开的那一刻算起.由于安全方面的考虑,开发人员无法得到用户浏览器的URL,但借由用户访问过的页面列表,可以在不知道实际URL的情况下实现后 ...

  4. SOCKET是什么

    一.问题的引入--socket的引入是为了解决不同计算机间进程间通信的问题 1.socket与进程的关系 1).socket与进程间的关系:socket   用来让一个进程和其他的进程互通信息(IPC ...

  5. mybatis关联查询，查询结果多条，却只返回一条记录

    原因是:主表和子表的主键字段相同,可以使用别名!这是因为mybatis的内部实现机制决定的: MyBatis为了降低内存开销,采用ResultHandler逐行读取的JDBC ResultSet结果集 ...

  6. swift 2.0 用代码写一个简单地UIWebView

    其实写一个UIWebView 挺简单的,但是今天就被9.0 的新特性给坑了,不知道上一个项目中有没有遇到这个问题,反正是时间成了,自己也忘记了.今天还是再说一次吧. 我们先简单的创建一个UIWebVi ...

  7. 正则表达式中的match，test，exec，search的返回值

    今天突然被问到了正则表达式,因为长时间不用突然不知道怎么用了,只知道有这么个东西.然后去网上查了一下,感觉写的不少,但解释的有点模糊,今天我来浅谈一下. 1,match的用法 A,在不加全局“g”的情 ...

  8. spring配置文件头部xmlns配置精髓

    <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w ...

  9. hibernate 为什么持久化类时必须提供一个不带参数的默认构造函数

    因为hibernate框架会调用这个默认构造方法来构造实例对象..即Class类的newInstance方法 这个方法就是通过调用默认构造方法来创建实例对象的 ,另外再提醒一点,如果你没有提供任何构造 ...

  10. linux下安装Mysql 以及导入数据库

    1.下载mysql的rpm包,创建一个文件夹例如software来放置下面文件 可以通过wget下载具体的地址 (1)MySQL-server-5.6.10-1.rhel5.x86_64.rpm:My ...