How to apply a delay to the CSS display property in a change from None to flex without Javascript?

Question

How do I get the CSS display property to switch from None to flex with a 1s delay without using Javascript for this?

I have the following code:

#botao-painel:checked ~ .painel {
    display: flex;
    height: 100%;
    left: 0;
   top: 0;
   width: 100%;
}
.painel {
    align-items: center;
    background-color: RGBA(0,0,0,0.85);
    display: none;
    height: 0;
    justify-content: center;
    left: 50%;
    position: fixed;
    top: 50%;
    transition: all 1000ms ease 2000ms;
        -webkit-transition: all 1000ms ease 2000ms;
    width: 0;
    z-index: 500;
}
.painel > div {
    align-items: center;
    background-color: RGB(255,255,255);
    display: flex;
    height: 75%;
    justify-content: center;
    width: 46%;
}

The problem is that when I click the button it applies the properties in . but the delay and not even the animation are used, simply everything appears at once.

Does anyone have any tips to give me how to solve this without using Javascript, only with CSS?

Answer 1

The problem is that the display does not work with transition, so when checking the element will be applied immediately the flex display.

An outline for this is using the property visibility of hidden for visible, leaving the element always with display: flex. Since he’s an element fixed, will not interfere with the layout in relation to the other elements.

The property to apply delay is Transition-delay.

See in the code below what has been removed, added and changed.

#botao-painel:checked ~ .painel {
   visibility: visible; /* adicionado */
    /*display: flex; removido */
    height: 100%;
    left: 0;
   top: 0;
   width: 100%;
}
.painel {
    align-items: center;
    background-color: RGBA(0,0,0,0.85);
    visibility: hidden; /* adicionado */
    /*display: none;*/
    display: flex; /* alterado */
    height: 0;
    justify-content: center;
    left: 50%;
    position: fixed;
    top: 50%;
    transition: all 1000ms ease 2000ms;
        -webkit-transition: all 1000ms ease 2000ms;
    width: 0;
    z-index: 500;
    -webkit-transition-delay: 5s; /* adicionado */
    transition-delay: 1s; /* adicionado 1 segundo */
}
.painel > div {
    align-items: center;
    background-color: RGB(255,255,255);
    display: flex;
    height: 75%;
    justify-content: center;
    width: 46%;
}

<div>
   <input id="botao-painel" type="checkbox"> Marque e aguarde 1 segundo
   <div class="painel">
      <div>
         Painel
      </div>
   </div>
</div>