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. 分布式搜索之搭建Solrcloud(Solr集群)

    Solrcloud介绍: SolrCloud(solr集群)是Solr提供的分布式搜索方案. 当你需要大规模,容错,分布式索引和检索能力时使用SolrCloud. 当索引量很大,搜索请求并发很高时,同 ...

  2. 怎样在chrome中内置扩展，以及一些简单的定制

    本文中chromium 版本为54 参考资料: chromium如何新增extension API以及添加内部扩展 http://slides.com/luyuan/grit#/ 一.嵌入扩展 1.  ...

  3. Weex系列二、显示图片

    上次我们创建了一个简单的Weex的demo. 一.常用的类 WXSDKEngine:SDK开放的绝大多数接口都在此有声明. WXLog: 用来打印日志. WXDebugTool: weex提供的对外调 ...

  4. oracle中的net manager 无法配置

    今天遇到配置oracle net manager时无法配置,点击服务命名下面没有节点,绿色加号也没有反应 后在网上查到是因为tnsnames文件中的有空格存在导致 文件路径:oracle/produc ...

  5. Spark源码分析之Spark-submit和Spark-class

    有了前面spark-shell的经验,看这两个脚本就容易多啦.前面总结的Spark-shell的分析可以参考: Spark源码分析之Spark Shell(上) Spark源码分析之Spark She ...

  6. pod install 报错

    更新pod出现如下警告 The `SmartCloud_TS [Debug]` target overrides the `GCC_PREPROCESSOR_DEFINITIONS` build se ...

  7. 一期结业KTV项目难点

    查询完成后给歌曲便利到一个数组当中将选中的歌曲对象加入到playlist类中的数组songs. 创建类名称: class Playlist       {   //定义一个长度为50的数组       ...

  8. iOS异步处理

    有过编程经验的人,基本都会接触到多线程这块. 在java中以及Android开发中,大量的后台运行,异步消息队列,基本都是运用了多线程来实现. 同样在,在ios移动开发和Android基本是很类似的一 ...

  9. MSCRM 通过Ajax调用WCF服务

    Call WCF Service from Dynamics CRM using AJAX A couple of days back, I had one of my ex-colleagues c ...

  10. Hibernate执行流程和关系映射

    一.Hibernate的执行流程 hibernate作为一个ORM框架,它封装了大量数据库底层的sql语句操作的方法,这样在执行hibernate的过程中理解hibernate的执行流程很有必要. 由 ...