关于FireFox下 CSS3 transition 与其他浏览器的差异
最近一个项目,动画效果全靠CSS3来做,用得比较多的transition,发现了一点火狐与其他浏览器的小差异。
首先我们写CSS的时候,一般为属性值为0的属性,我们一般会这样写
#id{
positon: relative;
left: 0;
right: 0;
}
#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 与其他浏览器的差异的更多相关文章
- 在进行页面的DIV CSS排版时,遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的对于该问题的解决方法也是“见机行事”。
当一个img标签没得图片时,在firox中,即使给img标签设置了固定高度和宽度,img标签还是不会站位: 解决方法一:直接将img设置为块状元素:即,设置img为“display:block;”.在 ...
- 获取第下一个兄弟元素 屏蔽浏览器的差异(nextElementsibling)
//获取element下一个兄弟元素 function getNextElementSibling(element){ //能力检测 判断是否支持nextElementSibling if(eleme ...
- 【转】CSS3 transition规范的实际使用经验
原文转自:http://blog.jobbole.com/56243/ 本篇文章主要讲述CSS3 transition规范和在不同浏览器之间的使用差异,关于具体解决方法或如何规避问题的意见可以参考另一 ...
- CSS3 transition规范的实际使用经验
本篇文章主要讲述CSS3 transition规范和在不同浏览器之间的使用差异,关于具体解决方法或如何规避问题的意见可以参考另一篇非常有见地的文章,“All You Need to Know Abou ...
- CSS3 transition 属性过渡效果 详解
CSS3 transition 允许 CSS 元素的属性值在一定的时间区间内平滑地过渡.我们可以在不使用 Flash 动画或 JavaScript 的情况下,在元素从一种样式变换为另一种样式时为元素添 ...
- CSS3 transition实现超酷图片墙动画效果
一.前面的感慨以前也陆陆续续试过CSS3的一些特性,文字投影,多边框等.但都是试试而已,知道有这么回事.今天,见到了一个新玩意,transition,认认真真的试了一下,经过,我懵了,我呆了,我傻了, ...
- css3 transition animation nick
时光转眼即逝,又到周六了,今天写点某部分人看不起的css玩玩! 转换 转换属性transform: 浏览器前缀: -webkit-transform;-o-transform;-moz-transfo ...
- 小tip:FireFox下文本框/域百分比padding bug解决——张鑫旭
一.问题描述 我是流体布局控,经常会遇到文本框以及文本域宽度100%自适应显示的情况. 如下效果图: 在窄屏下,上面的文本框宽度也要跟着外部宽度变小. 难点对于文本框或者文本域,光标最好距离左侧边缘有 ...
- css3 transition属性
最近打算学习css3知识,觉得css3写出来的效果好炫好酷,之前一直想要学习来着.可能之前的决心,毅力,耐心不够,所以想要重整起来,放下浮躁的心态,一步一个脚印,踏踏实实的来学习. 首先学习的是css ...
随机推荐
- 【Linux高频命令专题(14)】nl
概述 nl命令在linux系统中用来计算文件中行号.nl 可以将输出的文件内容自动的加上行号!其默认的结果与 cat -n 有点不太一样,nl 可以将行号做比较多的显示设计,包括位数与是否自动补齐 0 ...
- MIT算法导论——第三讲.The Divide-and-Conquer
本栏目(Algorithms)下MIT算法导论专题是个人对网易公开课MIT算法导论的学习心得与笔记.所有内容均来自MIT公开课Introduction to Algorithms中Charles E. ...
- 苹果操作系统Mac OS X
OS X 是先进的操作系统.基于坚如磐石的 UNIX 基础,设计简单直观,让处处创新的 Mac 安全易用,高度兼容,出类拔萃. UNIX 之威力,Mac 之简单OS X 既简单易用且功能强大.所有的一 ...
- windows本地无法启动sqlserver服务
解决方法:进入服务列表后,选择sqlserver服务,右键然后选择属性,然后在登陆选项卡中,选择本地系统帐户,这样就可以启动sqlserver服务了
- ubuntu创建用户
Linux 系统是一个多用户多任务的分时操作系统,任何一个要使用系统资源的用户,都必须首先向系统管理员申请一个账号,然后以这个账号的身份进入系统.用户的账号 一方面可以帮助系统管理员对使用系统的用户进 ...
- (三)CSS高级语法
选择器分组 可以对选择器进行分组,被分组的选择器可以分享相同的声明,用逗号将需要分组的选择器分开.例如: h1,h2,h3,h4,h5,h6 { color: green; } 继承以及其问题一般,子 ...
- kafka的环境搭建
kafka是一个高吞吐量的消息系统.隔离消息接收和处理过程(可理解为一个缓存) 1.kafka伪分布的部署 1.1.下载并解压 1.2.启动zk bin/zookeeper-server-start. ...
- Android_PendingIntent的使用
PendingIntent介绍 PendingIntent可以看作是对Intent的一个封装,但它不是立刻执行某个行为,而是满足某些条件或触发某些事件后才执行指定的行为. PendingInt ...
- asp.net创建XML文件方法
方法一:按照XML的结构一步一步的构建XML文档. 通过.Net FrameWork SDK中的命名空间"System.Xml"中封装的各种类来实现的 方法一:按照XML的结 ...
- UVALive 3661 Animal Run(最短路解最小割)
题意:动物要逃跑,工作人员要截断从START(左上角)到END(右下角)的道路,每条边权表示拦截该条道路需要多少工作人员.问最少需要多少人才能完成拦截. 通俗地讲,就是把图一分为二所造成消耗的最小值. ...