CSS transitions should allow binary styles to be changed

[jez9999]

It would be nice to be able to do this:

#menuToggle input~#menu {
    /* Hide menu */
    display: none;
    transition: display 0ms 0.5s;
}
#menuToggle input:checked~#menu {
    /* Display menu */
    display: unset;
    transition: display 0ms 0ms;
}

A major thing CSS transitions are lacking right now is the ability to transition "binary" properties such as display, where there is no clear way to gradually transition them. However, this doesn't mean it wouldn't be useful to be able to simply delay their being changed. Being able to slide a pure CSS menu off the page, for example, is currently supported, but it then needs to be set to display:none to take it out of the document flow. When this is specified as a transition, the transition should simply do nothing until the delay has passed and then transition instantly.

[birtles]

We considered this at one point but one of the issues is that it is very common to see transition: all 300ms for example.

Indeed, the initial value of transition-property is all. So if we start treating discretely-animatable properties as transitionable, we will break a lot of content that is not expecting these properties to transition (not only because there will be visual differences, but also because more transition events will be dispatched).

I suppose we could treat any explicitly listed properties as a signal to opt-in to transitioning them but there are still a few questions:

1. Would that apply to shorthands? e.g. it is common to use transition: background 300ms when the author really just wants to transition background-color. If we start transitioning background-attachment, background-repeat etc. we will possibly break content.
2. If it only applies to longhands, what happens to longhands that end up being promoted to shorthands in the future? Would we need to maintain a list of "legacy longhands" or some such?

I'm not sure what the right behavior would be here.

And even then, we wouldn't naturally produce the "change immediately after the delay" behavior, unless the author also specified a zero duration interval like in your example, or a suitable step timing function.

[jez9999]

How about introducing a transition-delay-only property that lists properties whose only transition is a delay? If combined with transition, it could override the transition's delay value, or just mean that transition becomes delay-only.

[tabatkins]

Wait, no, discretely-animated properties are still animated, even by a transition-property: all. What's not animated are properties that are listed as not animateable, and the small number of properties that have this status do so because it's fundamentally problematic to animate them.

display is actually the worst one - an element with display:none doesn't run animations at all, so at minimum we can't meaningfully transition from display:none. In general, things that change what the principal box is are problematic for similar reasons; even if they could hypothetically be defined, they have issues in implementations.

[birtles]

Wait, no, discretely-animated properties are still animated, even by a transition-property: all. What's not animated are properties that are listed as not animateable, and the small number of properties that have this status do so because it's fundamentally problematic to animate them.

For transitions, we don't transition discretely animatable properties. See the definition of transitionable.