CSS 过渡 0s（零秒）不起作用？答案

【问题标题】：CSS transition 0s (zero seconds) not working?CSS 过渡 0s（零秒）不起作用？
【发布时间】：2016-09-26 16:52:37
【问题描述】：

我想避免元素上的一些过渡效果（例如：opacity）。我应该使用opacity 0s，因为这应该是默认值，或者换句话说，转换对此没有影响。但它不是这样工作的。这是我尝试过的：

div {
    width: 100px;
    height: 100px;
    opacity: 0.5;
    background: red;
    -webkit-transition: all 2s, opacity 0s;
    transition: all 2s, opacity 0s;
}

div:hover {
    width: 300px;
    opacity: 1;
}

&lt;div&gt;&lt;/div&gt;

div {
    width: 100px;
    height: 100px;
    opacity: 0.5;
    background: red;
    -webkit-transition: all 2s, opacity 0.1s;
    transition: all 2s, opacity 0.1s;
}

div:hover {
    width: 300px;
    opacity: 1;
}

&lt;div&gt;&lt;/div&gt;

但是，如果 opacity 中的 0s 更改为 0.1s，它将起作用（持续时间为 0.1 秒），有没有办法以其他方式“禁用”动画，也许，所以它即使没有像 0.1s 这样的小值也能工作吗？

【问题讨论】：

感谢 Juhana（我忘了昵称）添加了一个 sn-p。我按照这个技巧对另一个代码做了同样的事情，只是为了显示0s和0.1s的区别
使用all 作为transition-property 效率不高；只要有可能，您应该使用您想要转换的实际属性。在你上面的例子中，那只是width。
非常有趣的问题@cathe 和奇怪的行为，因为规范说明了这一点 -如果在“transition-property”的值中多次指定一个属性（无论是单独指定，通过简写包含它，或通过'all'值），然后开始的过渡使用与'transition-property'值中的最后一项对应的索引处的持续时间，延迟和计时函数，该值要求为该属性设置动画..您是否在多个浏览器中对此进行了测试？行为是否相同？

标签： html css css-transitions

【解决方案1】：

这是一个解决方案

transition: all 2s, opacity 1ms;

因为0s 是无效的时间（我不知道为什么）。而1ms 对人眼来说很可能是0s。

对于您当前的问题，您还可以使用transition: width 2s，它仅适用于width。

【讨论】：