2016-01-23 61 views
-3

我的基本工作示例代码:为什么这个CSS过渡速记不起作用了?

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

如果我删除过渡期限前0s跃迁延迟再经过它不工作:

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给了我错误“未知属性名称”,我需要将其更改为以前的版本使我的过渡再次工作。我如何解决这个问题,因为我有很多第二种格式的代码。

+0

哪个属性应该是'0'? –

+0

@Mr列表器:过渡延迟(第一个

+0

@Mr Lister:规范告诉实现如何解释声明。它说,第一个

回答

2

即使所有单元表示为值0,同时,该单元可能不会在这种情况下,省略,因为它不是一个<length>:0是无效,并且不表示0,0毫秒。

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

你的代码是从来没有有效的,它从来没有在其他浏览器Chrome以外的工作。看起来他们现在正在尊重标准。你需要验证你的代码,如果你想它的工作。

5

CSS never permitted unitless zeroes for time values.不幸的是,你一直依赖于Chrome一直以来的错误。幸运的是,他们似乎终于解决了问题。

事实上,您包含其他前缀意味着您应该在开发早期发现其他前缀从未在任何其他浏览器上工作,因为无单位为零,并且您应该永远不会将无单位零时间保留在第一名。

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