最近一个项目,动画效果全靠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. 纯后台生成highcharts图片有哪些方法?

    比如说,领导抛给你一个需求,把一些数据做成图表,每天通过邮件发送,让领导能在邮件中就看到图片,你会有什么思路呢?本人使用的是phantomjs这个神器,它的内核是WebKit引擎,不提供图形界面,只能 ...

  2. Java API —— Pattern类

    正则表达式     写一个功能实现QQ号码的校验. import java.util.Scanner; public class RegexDemo01 { public static void ma ...

  3. Entity Framework学习 - 1.连接数据库

    1.添加项,选择ADO.NET实体数据模型 2.选择从数据库生成 3.建立数据库连接 4.选择要关联的表 点击完成,数据库已连接完毕,并生成了对应的Model

  4. TCSRM 591 div2(1000)(dp)

    挺好的dp 因为有一点限制 必须任意去除一个数 总和就会小于另一个总和 换句话来说就是去除最小的满足 那么就都满足 所以是限制最小值的背包 刚开始从小到大定住最小值来背 TLE了一组数据 后来发现如果 ...

  5. ZOJ 1610 Count the Colors (线段树 成段更新)

    题目链接 题意:成段染色,初始为0,每次改变一个区间的颜色,求最后每种颜色分别有多少段.颜色按照从 小到大输出. 分析:改变了代码的风格,因为看了学长的博客.直接用数组,可以只是记录节点的编号,因为节 ...

  6. Qt之QuaZIP(zip压缩/解压缩)

    简述 QuaZIP是使用Qt/C++对ZLIB进行简单封装的用于压缩及解压缩ZIP的开源库.适用于多种平台,利用它可以很方便的将单个或多个文件打包为zip文件,且打包后的zip文件可以通过其它工具打开 ...

  7. QWidget、QDialog、QMainWindow的异同点

    简述 在分享所有基础知识之前,很有必要在这里介绍下常用的窗口 - QWidget.QDialog.QMainWindow. QWidget继承于QObject和QPaintDevice,QDialog ...

  8. version_info

    import sys def check_version(): v = sys.version_info if v.major == 3 and v.minor >= 4: return Tru ...

  9. apache开源项目 -- tez

    为了更高效地运行存在依赖关系的作业(比如Pig和Hive产生的MapReduce作业),减少磁盘和网络IO,Hortonworks开发了DAG计 算框架Tez.Tez是从MapReduce计算框架演化 ...

  10. Linux编译安装Darwin Streaming Server 6.0.3。。。

    目前主流的流媒体服务器有微软的windows media server.RealNetworks的Helixserver和苹果公司的Darwin Streaming Server. 微软的window ...