为什么这个CSS过渡速记不再起作用?

时间:2016-01-23 16:57:20

标签: css css3 google-chrome css-transitions

我的基本工作示例代码:

div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: all 0.25s ease 0s;
    -moz-transition: all 0.25s ease 0s;
    transition: all 0.25s ease 0s;
}

Demo

如果我在转换延迟之前删除了0,而在转换延迟之后删除了s那么它就无效了:

div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: all .25s ease 0;
    -moz-transition: all .25s ease 0;
    transition: all .25s ease 0;
}

我问这个问题,因为我的转换正在使用后一个代码,但突然Chrome给了我“错误的属性名称”错误,我需要将其更改为以前的版本,以使我的转换再次运行。我怎么能解决这个问题,因为我有很多第二种格式的代码。

2 个答案:

答案 0 :(得分:5)

CSS never permitted unitless zeroes for time values.不幸的是,您一直依赖Chrome中的错误。幸运的是,似乎他们终于得到了修复它。

您包含其他前缀的事实意味着您应该在开发的早期发现其他前缀从未在任何其他浏览器上工作,因为无单位零,并且您永远不应该在第一个中保持无单位零次的地方。

必须更新所有代码,因为它现在只是无效的CSS。这里的教训是在多个浏览器上进行测试。特别是如果你要为他们写前缀。

答案 1 :(得分:2)

  

即使所有单位代表值0的相同时间,在这种情况下也不能省略该单位,因为它不是<length>:0无效且不代表0s,0ms。 / p>

//developer.mozilla.org/en-US/docs/Web/CSS/time

您的代码永远无效,并且在Chrome以外的其他浏览器中无法使用。看起来他们现在正在尊重标准。如果希望代码有效,则需要验证代码。