Created attachment 32329 [details] Test case Not entirely sure if this is the correct behavior. Apologies if this is the case. Setting an element to display:none and opacity:0, with a transition on opacity, then setting it to display:block and opacity:1 results in the transition being ignored. Expected behavior would be for the element to have its display changed and the element still fade appropriately.
Update -- all transitions are ignored in this case. Ex: Set the transition of a div to 'left', change the left value after setting the 'display' style to block.
Yeah, transitions don't run when display is changing from 'none'.
I updated the test case to remove -webkit- prefix to make it easier to test all browsers: Link - https://jsfiddle.net/nwrt6pg5/show All browsers are ignoring "transition" and upon clicking - It is immediate 'TADA' across all (Chrome Canary 105, Firefox Nightly 104 and Safari 15.6 on macOS 12.5). I am not sure on what to expect more, is it something aligned with web-spec or something wrong across all browsers. Just wanted to share updated testing results. Thanks!