为啥这个 CSS 过渡速记不再起作用了？

Posted 2023-03-06

技术标签:

【中文标题】为啥这个 CSS 过渡速记不再起作用了？【英文标题】：Why does this CSS transition shorthand not work anymore?为什么这个 CSS 过渡速记不再起作用了？ 【发布时间】：2016-04-30 04:55:35 【问题描述】：

我的基本工作示例代码：

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

【问题讨论】：

那么0 应该是哪个属性？ @Mr Lister：转换延迟（第一个值映射到转换持续时间）。不知道为什么需要指定它，因为transition-delay的初始值是零。 @Mr Lister：规范告诉实现如何解释声明。它说第一个总是映射到 transition-duration。因为它无效？这是个什么样的问题？通过CSS validator 运行代码会给你答案。 @cimmanon：每当出现类似情况时，我都会很乐意链接回this comment。 【参考方案1】：

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

您包含其他前缀的事实意味着您应该在开发的早期发现其他前缀由于无单位零而无法在任何其他浏览器上工作，并且您永远不应该在第一次保留无单位零次地点。

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

【讨论】：

【参考方案2】：