最近一个项目,动画效果全靠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. 【mysql的编程专题④】存储过程

    类似函数,但是没有返回值,把sql进行封装,便于多次使用或多种应用程序共享使用.不能用在SQL语句中,只能使用CALL调用; 创建存储过程 语法 CREATE PROCEDURE sp_name ([ ...

  2. Hibernate逍遥游记-第12章 映射值类型集合-001映射set(<element>)

    1. 2. <?xml version="1.0"?> <!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate ...

  3. JavaScript DOM编程基础精华03(动态设置,层的操作,性能问题)

    代码是否需要放置到onload中  //如果js代码需要操作页面上的元素,则将该代码放到onload里面.         //因为当页面加载完毕之后页面上才会有相关的元素 //如果js代码中没有操作 ...

  4. C#实现的ReplaceFirst和ReplaceLast

    原文:C#实现的ReplaceFirst和ReplaceLast ReplaceFirst: public static string ReplaceFirst(string input, strin ...

  5. sql中exists,not exists的用法

    exists : 强调的是是否返回结果集,不要求知道返回什么, 比如:  select name from student where sex = 'm' and mark exists(select ...

  6. cas单点登出

    由于项目需求要实现单点登出需要在网上找了N久终于实现单点登出. 使用cas-server-core-3.3.3.jar(CAS Server 3.3.3) 使用cas-client-core-3.1. ...

  7. tokudb引擎安装-2

    前言:因为现在tokuDB直接整合到Percona server里面了,下载页面直接跳转到下载Percona Server 页面了.安装方法跟以前不一样了,下面就来看一下新版本怎么安装了 ##准备阶段 ...

  8. struct hw_module_t HAL_MODULE_INFO_SYM

    先开个头,准备这与一篇struct hw_module_t HAL_MODULE_INFO_SYM 相关的文章. Hal层的库文件是怎么被上层调用的?上层调用时的入口(相当于main)又是什么呢?它就 ...

  9. java怎样读取数据库表中字段的数据类型?

    用DriverManager.getConnection()得到connect, 用connect.getMetaData()得到 DatabaseMetaData, 用 DatabaseMetaDa ...

  10. bzoj1109

    我们设f[i]为保留第i个木块最多的符合未知数 显然f[i]=max(f[j])+1 满足i>j a[i]>a[j] i-j>=a[i]-a[j] 我们把最后一个式子变成a[i]-i ...