CSS过渡0秒(零秒)不起作用?

时间:2016-05-28 12:18:15

标签: html css css3 css-transitions

我想避免对元素的某些过渡效果(例如: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;
}
    
<div></div>

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;
}
    
<div></div>

但是,如果0s的{​​{1}}更改为opacity,它会起作用(持续时间为0.1秒),有没有办法在其他一些内容中“禁用”动画或许,所以它甚至可以在没有0.1s的小值的情况下工作?

1 个答案:

答案 0 :(得分:2)

以下是此

的解决方案

transition: all 2s, opacity 1ms;

因为0s不是有效的时间(我不知道为什么会这样)。 1ms是人眼可能0s的非常小的时间。

对于您当前的问题,您还可以使用仅适用于transition: width 2s的{​​{1}}。