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. nRF51800 蓝牙学习 进程记录 2：关于二维数组 执念执战

    前天在玩OLED时想完成一直想弄得一个东西,就是简单的单片机游戏.因为STM32和nRF51822的内存足够,所以就用缓存数组的方法来显示图像(我也不知道术语是啥,反正就是在内存中建立一个128X64 ...

  2. webAppbuilder微件使用教程3 地理处理微件

    webAppbuilder微件使用教程 --微件使用进阶地理处理微件 By 李远祥 地理处理是GIS解决问题的关键部分,也是其灵魂所在.由于WebAppBuilder框架的限制,用户如果想要非常灵活的 ...

  3. 构建自动化前端样式回归测试——BackstopJS篇

    在使用scss和less开发的时候,遇到过一件很有趣的事,因为网站需要支持响应式,就开了一个响应式样式框架,简单的几百行scss代码,居然生成了近100KB的css代码,因此决定重构这个样式库.而重构 ...

  4. 深入浅出ThreadLocal

    前言 ThreadLocal为变量在每个线程中都创建了一个副本,所以每个线程可以访问自己内部的副本变量,不同线程之间不会互相干扰.本文会基于实际场景介绍ThreadLocal如何使用以及内部实现机制. ...

  5. 重新认识一个强大的 Gson

    从一个 Bug 说起 不知道你们发现没有,你写完的程序无论当时怎么测试,过一段时间总会出 Bug .再说一个每天都在发生的例子:在你写完一篇博客后,立即检查的话,总是查不出自己写的错别字. 据说这些都 ...

  6. php测试题 知识点整理

    1 SQL语句的整理: insert into+表名+values +(添加的内容 )  例:  insert into users values ('p001','张三','男'); 修改: upd ...

  7. PowerPoint超链接字体颜色修改、怎么去掉超链接下划线

    经常在做PPT幻灯片时会遇到这样一个问题,给文字加超链接后发现链接的颜色是蓝色的,而且还带有下划线,这种效果与主题的色彩搭配简直是太影响美观效果了.有没有什么办法可以去掉PPT中的超链接下划线?再将超 ...

  8. 国内不能使用Google解决方案（不断更新与递增中...）

    1.修改hosts方式可以根据对hosts的配置,解决Google搜索.Gmail.谷歌学术.维基百科.GitHub.Twitter.Facebook.Flickr.imgur.Google Serv ...

  9. GridControl 设置自带选中复选框及设置该列列头名称

    2.设置该列标题,设置事件CustomDrawColumnHeader 效果图:

  10. C++指向常量的指针和常指针

    C++指向常量的指针和常指针 指向常量的指针 通常情况下,可以通过指针去修改指针指向的内容.但是在某些情况下,只希望通过指针去访问指针指向的内容,不想修改.比如只想通过树根结点的指针去遍历输出树中所有 ...