CSS transition 0s (zero seconds) not working?

Question

I want to avoid some of the transition effects on the element (for example: opacity). I should use opacity 0s, because this should be the default value or in other words transition will have no effect on this. But it's not working this way. This is what I tried:

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>

However, if 0s of the opacity changed to 0.1s, it will work(with duration of 0.1s), is there a way to "disable" the animation in some other way, perhaps, so it will work without even a small value as 0.1s?

Answer 1

Here is an solution for this

transition: all 2s, opacity 1ms;

As 0s is not valid time for this (I don't know why this). and 1ms is very small time likely to 0s for human eye.

And for your current problem you can also use transition: width 2s which is only applicable for width.