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. JTable 的使用

    JTable是Swing编程中的一种控件. 一.创建表格控件的各种方式:1) 调用无参构造函数. JTable table = new JTable(); 2) 以表头和表数据创建表格. Object ...

  2. 一个案例深入Python中的__new__和__init__

    准备 在Python中,一切皆对象. 既然一切皆对象,那么类也是对象,我们暂且称之为 类对象.来个简单例子(本篇文章的所有案例都是运行在Python3.4中): class foo(): pass p ...

  3. 《JAVASCRIPT高级程序设计》第二章

    把javascript应用在网页中,需要涉及web的核心语言-html:如何让javascript既能与html共存,又不影响页面的显示效果,经过长时间的讨论.试错,最终的决定是为web增加统一的脚本 ...

  4. [html5] 学习笔记-SVG

    1.SVG介绍:什么是SVG? 1)SVG指可伸缩矢量图形(Scalable Vector Graphics) 2)SVG用来定义用于网络的基于矢量的图形 3)SVG使用XML格式定义图形 4)SVG ...

  5. jenkins全局安全设置

    如何进入安全设置界面          在Jenkins的主界面,点击 configure Global Security 选项,进入Jenkins的系统安全设置界面.安全界面如下图.在这里我们分别介 ...

  6. Match类解析

    Matcher类:使用Matcher类,最重要的一个概念必须清楚:组(Group),在正则表达式中()定义了一个组,由于一个正则表达式可以包含很多的组,所以下面先说说怎么划分组的,以及这些组和组的下标 ...

  7. asp.net core mvc剖析：路由

    在mvc框架中,任何一个动作请求都会被映射到具体控制器中的方法上,那框架是如何完成这样一个过程的,现在我们就来简单分析下流程. 我们紧跟上面的主题,任何一个请求都会交给处理管道进行处理,那mvc处理的 ...

  8. 【原创】python中文编码问题深入分析（二）：print打印中文异常及显示乱码问题分析与解决

    在学习python以及在使用python进行项目开发的过程中,经常会使用print语句打印一些调试信息,这些调试信息中往往会包含中文,如果你使用python版本是python2.7,或许你也会遇到和我 ...

  9. Java数组练习题小结

    //2015/07/07 //Java数组小小练习题 /* 3. 写一个函数,计算一个整数数组的平均值 4. 自定义一个整数数组a,读入一个整数n,如果n 在数组中存在,则输出n 的下标:如果不存在, ...

  10. jxls2.3-简明教程

    jxls是一个简单的.轻量级的excel导出库,使用特定的标记在excel模板文件中来定义输出格式和布局.java中成熟的excel导出工具有pol.jxl,但他们都是使用java代码的方式来导出ex ...