关于FireFox下 CSS3 transition 与其他浏览器的差异

最近一个项目，动画效果全靠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的时间比较少，这次设置后发现的。 还发现最新版的火狐可以直接像上面那样写了，不用加前缀了。

转载于:https://www.cnblogs.com/soulUED/p/3416191.html