最近一个项目,动画效果全靠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. compiler 学习

    一款强大的编译器LLVM:http://llvm.org/docs/GettingStarted.html#layout http://llvm.org/docs/LangRef.html http: ...

  2. 不用Invoke就等用 Control.CheckForIllegalCrossThreadCalls = false;

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  3. 深度分析Java的ClassLoader机制(源码级别)

    写在前面:Java中的所有类,必须被装载到jvm中才能运行,这个装载工作是由jvm中的类装载器完成的,类装载器所做的工作实质是把类文件从硬盘读取到内存中,JVM在加载类的时候,都是通过ClassLoa ...

  4. List应用举例

    1.集合的嵌套遍历 学生类: package listexercise; /** * Created by gao on 15-12-9. */ public class Student { priv ...

  5. checkbox 全选、全不选、反选 插件

    jquery.checkbox.js: ;(function($,window,document,undefined){ $.fn.check=function(mode){ mode= mode | ...

  6. EBS报表输出文件格式控制

    具体使用方法:1.添加用户参数p_conc_request_id2.在BeforeReport trigger中添加srw.user_exit('FND SRWINIT');          和Af ...

  7. 通俗易懂的讲解iphone视图控制器的生命周期

    IOS 视图控制器的生命周期非常非常重要,所以我有必要写个文章来和大家一起探讨问题. 今天在学习视图控制器的生命周期,也看了一下网上的一些资料,但总觉得不是那么好理解,首先我们来看一张图: 先粗略讲一 ...

  8. oj放苹果

    题目描述 把M个同样的苹果放在N个同样的盘子里,允许有的盘子空着不放,问共有多少种不同的分法?(用K表示)5,1,1和1,5,1 是同一种分法. 输入 每个用例包含二个整数M和N.0<=m< ...

  9. LA 2218 (半平面交) Triathlon

    题意: 有n个选手,铁人三项有连续的三段,对于每段场地选手i分别以vi, ui 和 wi匀速通过. 对于每个选手,问能否通过调整每种赛道的长度使得他成为冠军(不能并列). 分析: 粗一看,这不像一道计 ...

  10. hdu 4671 Backup Plan(签到题)

    错成那样,还以为是卡时间卡精度的变态题,结果就那么ac了= = 悔死我了 题意就不概述了,只要处理前两列即可.其中第一列顺序直接扫一遍,第二列要先处理较少的那几种.我是接着第一列用 head[] 继续 ...