skip navigation

display:none transitions

Tagged in: transition , display , allow-discrete , @starting-style , animation
Grouped in: animation

If you want to use an animation transition when taking an element to or from display: none it’s tricky because you can’t transition the display property. However with 2 CSS rules it’s now done relatively easily..

On your currently hidden (display: none) element you add:transition-behavior: allow-discrete;.

div {
    display: none;
    scale: 0;
    transition: all 0.5s linear;
    transition-behavior: allow-discrete;
}

Then on your open element add the @starting-style to the END of your declaration like so..

div:hover {
    display: block;
    scale: 1;

    @starting-style {
        scale: 0;
    }
}

random image

In brief

Add transition-behavior: allow-discrete to the hidden element.

Add the @starting-style rule to the end of the revealed elements declaration. This should contain the styles wanted before the transition, ie. the starting styles.

☝