[css-transition-transition-delay-animation-extension]

[nixkuroi]

This request is in regard to the CSS Transition and Transition-delay rules
https://www.w3.org/TR/css3-transitions/#transition-delay-property

The proposal is to make any rule transitionable, even those that can not be animated. The result would be that the transition happens at the end of the delay.

Use cases:

The most obvious example would be opacity:0 followed by display:none;

.fade-out-and-disappear {
    display: none;
    opacity: 0;
    transition: opacity .3s linear, display .3s linear;
}

Currently, the display:none will fire and the opacity transition will be moot. If the display:none was allowed to fire at the end of the transition timer, it would effectively remove interaction with the element and not block pointer events beneath it.

Another example is with the css pointer events selector. Once set, it does not allow the element to be interacted with using the mouse. If pointer-events was allowed to fire after the transition delay, it would allow for the following scenario where the opacity transition can be canceled by :hover.

.fade-out {
     opacity: 0;
     pointer-events: none;
     transition: opacity .3s linear, pointer-events .3s linear;
}

.fade-out: hover {
   opacity: 1;
   pointer-events: initial;
}

No (obvious) breakage

The above changes shouldn't break any well-formed code that has already been written since transitioning these components does nothing at this point.

Alternatively, an addition trandition-timing function called "endstate" could be added that to make the time of transition explicit.

[tabatkins]

You're in luck! Every property is already transitionable; if it doesn't have any better behavior, it transitions halfway through the timing function's progress (so you can instead put it at the beginning or end by setting one of the step timing functions).

This hasn't been widely implemented yet, unfortunately. File bugs on browsers that aren't doing it. ^_^

[FremyCompany]

We should mention that if you don't like the halfway behavior, you can use a step(1, end) or step(1, start) timing function to achieve the effect you want (preventing the change to happen until the end or beginning of the animation.

[birtles]

display is not animatable however.

Also, Chrome only does the 50% switch for CSS Animations, not CSS Transitions. In Firefox we do the 50% switch for some properties, but not others--we're currently in the process of straightening this out. Also, like Chrome, we only do it for CSS Animations and not CSS Transitions.

[tabatkins]

Yeah, display is a special-case.

Is there a reason y'all aren't doing it for Transitions?

[birtles]

Basically, because Chrome doesn't so we don't know if it's Web-compatible yet. I suspect it's not since a lot of people are using transition-property: all.

[nixkuroi]

I know functionality (with display) would have come in handy in almost every project I've worked at for the past few of years. Of course, you find your way around it by animating the item off the page between 99 and 100%, setting a zero max-height, or keying off transitionend (in a growing number of supported browsers). I'm not a fan of the transitionend event because I see it as kind of muddying the one way JS -> CSS pattern I'm used to, but all things change in a dynamic environment :)

If you're doing a lot of motion on the page and you want things to happen in a very specific way (opacity fade as something slides off the page, etc), using "all" just doesn't work. I'll give "step end" a try tonight for my hover example.

Thanks for pointing that out BTW. I appreciate you guys giving it some attention.