`@starting-style (Animații de Intrare din display: none)` în CSS

Tranziții și Animații CSS Transitions Level 2

Cea mai nouă facilitate de tranziție CSS: animarea elementelor la apariția în DOM direct din display: none (modale, meniuri, popover-uri).

Sintaxă CSS

@starting-style { opacity: 0; transform: translateY(-20px); }

Timp de decenii, una dintre cele mai frustrante limitări din CSS a fost imposibilitatea de a anima un element care trece din starea display: none în display: block. Pentru a crea un meniu sau un dialog care apare lin (fade-in), dezvoltatorii trebuiau să recurgă la trucuri cu setTimeout în JavaScript sau să manipuleze clase intermediare.

Noua regulă @starting-style permite definirea stării inițiale (starea „înainte de afișare”) de la care browserul va porni tranziția în momentul în care elementul devine vizibil pentru prima dată în fluxul de randare.

Animație lină de intrare pentru dialogul nativ <dialog>

/* 1. Starea activă a dialogului când este deschis */
dialog[open] {
    opacity: 1;
    transform: scale(1);
    
    /* Activează tranziția pe proprietățile de opacitate, transformare și display */
    transition: opacity 0.3s ease, transform 0.3s ease, display 0.3s allow-discrete;
}

/* 2. Starea de plecare când elementul trece din 'închis' în 'deschis' */
@starting-style {
    dialog[open] {
        opacity: 0;
        transform: scale(0.9);
    }
}

/* 3. Starea de ieșire la închidere */
dialog {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.3s ease, transform 0.3s ease, display 0.3s allow-discrete;
}

Cuvântul cheie allow-discrete

Pentru a permite animarea proprietăților discrete (precum display sau visibility), trebuie să adaugi valoarea allow-discrete în declarația transition. Aceasta îi transmite browserului să comute valoarea lui display: none abia după ce animația vizuală s-a încheiat complet.