最近一个项目,动画效果全靠CSS3来做,用得比较多的transition,发现了一点火狐与其他浏览器的小差异。

首先我们写CSS的时候,一般为属性值为0的属性,我们一般会这样写

#id{
positon: relative;
left: 0;
right: 0;
}
我记得有本讲CSS规范的书上也说css属性值为0的属性不要带单位,平时写代码的时候也比较注意,所以今天写transition的时候是这样写的
#id{
-webkit-transition: backgorund 0.5s ease 0;
-moz-transition: backgorund 0.5s ease 0;
-ms-transition: backgorund 0.5s ease 0;
transition: backgorund 0.5s ease 0;
}

写完了,看看浏览器端,IE10没问题,chrome没问题,火狐问题来了,居然没有效果,困扰了好久,最后发现火狐下要这样写

 
transition: backgorund 0.5s ease 0s;

发现差异了吧? 对最后一个数值上要加个s才有动画效果,平时设置最后一个参数为0的时间比较少,这次设置后发现的。 还发现最新版的火狐可以直接像上面那样写了,不用加前缀了。

关于FireFox下 CSS3 transition 与其他浏览器的差异的更多相关文章

  1. 在进行页面的DIV CSS排版时,遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的对于该问题的解决方法也是“见机行事”。

    当一个img标签没得图片时,在firox中,即使给img标签设置了固定高度和宽度,img标签还是不会站位: 解决方法一:直接将img设置为块状元素:即,设置img为“display:block;”.在 ...

  2. 获取第下一个兄弟元素 屏蔽浏览器的差异(nextElementsibling)

    //获取element下一个兄弟元素 function getNextElementSibling(element){ //能力检测 判断是否支持nextElementSibling if(eleme ...

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

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

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

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

  5. CSS3 transition 属性过渡效果 详解

    CSS3 transition 允许 CSS 元素的属性值在一定的时间区间内平滑地过渡.我们可以在不使用 Flash 动画或 JavaScript 的情况下,在元素从一种样式变换为另一种样式时为元素添 ...

  6. CSS3 transition实现超酷图片墙动画效果

    一.前面的感慨以前也陆陆续续试过CSS3的一些特性,文字投影,多边框等.但都是试试而已,知道有这么回事.今天,见到了一个新玩意,transition,认认真真的试了一下,经过,我懵了,我呆了,我傻了, ...

  7. css3 transition animation nick

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

  8. 小tip:FireFox下文本框/域百分比padding bug解决——张鑫旭

    一.问题描述 我是流体布局控,经常会遇到文本框以及文本域宽度100%自适应显示的情况. 如下效果图: 在窄屏下,上面的文本框宽度也要跟着外部宽度变小. 难点对于文本框或者文本域,光标最好距离左侧边缘有 ...

  9. css3 transition属性

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

随机推荐

  1. 你听说过PHP 的面向方面编程吗?

    面向方面编程(AOP)对于PHP来说是一个新的概念.现在PHP对于 AOP 并没有官方支持,但有很多扩展和库实现了这个特性.本课中,我们将使用 Go! PHP library 来学习 PHP 如何进行 ...

  2. Regex Tester 安装教程

    下载com.brosinski.eclipse.regex_1.4.0.jar 地址:https://github.com/sbrosinski/RegexTester 下载之后把jar包粘贴到${e ...

  3. AndroidApplication Fundamentals(Android应用基础)

    AndroidApplication Fundamentals(Android应用基础) Android应用采用Java编程语言来编写,AndroidSDK工具编译我们的代码,连同任何数据和资源文件一 ...

  4. 1176. Hyperchannels(欧拉回路)

    1176 给定一有向图 求其反图的欧拉回路 路径输反了 一直WA.. #include <iostream> #include<cstdio> #include<cstr ...

  5. JdbcTemplate查询数据 三种callback之间的区别

    JdbcTemplate针对数据查询提供了多个重载的模板方法,你可以根据需要选用不同的模板方法. 如果你的查询很简单,仅仅是传入相应SQL或者相关参数,然后取得一个单一的结果,那么你可以选择如下一组便 ...

  6. PL/SQL database character set(AL32UTF8) and Client character set(ZHS16GBK) are different 2012-04-11 13:01

    启动PL/SQL Developer 报字符编码不一致错误 Database character set (AL32UTF8) and Client character set (ZHS16GBK) ...

  7. POJ 2584 T-Shirt Gumbo (二分图多重最大匹配)

    题意 现在要将5种型号的衣服分发给n个参赛者,然后给出每个参赛者所需要的衣服的尺码的大小范围,在该尺码范围内的衣服该选手可以接受,再给出这5种型号衣服各自的数量,问是否存在一种分配方案使得每个选手都能 ...

  8. Python - re - 正则表达式 - 怎么用

    <python cookbook> - 1.18 - 一次完成多个替换 这个blog介绍正则,写得不错,而且,一如既往的‘长’. 1. re.escape(string) THIS,说明函 ...

  9. 【大数加法】POJ-1503、NYOJ-103

    1503:Integer Inquiry 总时间限制:  1000ms 内存限制:  65536kB 描述 One of the first users of BIT's new supercompu ...

  10. mvc项目,导出到Excel,中文显示乱码

      1 public class HomeController : Controller 2 { 3 static List<User> GetUsers() 4 { 5 List< ...