Reguła CSSReguły @

@starting-style

Opisuje styl, od którego zaczyna się przejście, gdy element pojawia się na stronie. Dzięki temu nowe elementy mogą płynnie wjeżdżać.

Na tej stronie

Przykład
Definicja i zastosowanie
Składnia
Efekty wejścia
Efekty wejścia w praktyce
Więcej przykładów
Obsługa przeglądarek
Dobre praktyki
Powiązane hasła

Przykład

CSS

.modal[open] {
  opacity: 1;
  scale: 1;
  transition: opacity 0.3s, scale 0.3s;
}

@starting-style {
  .modal[open] {
    opacity: 0;
    scale: 0.9;
  }
}

.modal::backdrop {
  background: rgb(0 0 0 / 0.6);
}

HTML przykładu

<style>
  .open, .modal button { padding: 8px 14px; border: 0; border-radius: 8px; background: #7c3aed; color: #fff; font: inherit; cursor: pointer; }
  .modal { padding: 18px 20px; border: 1px solid #3f3f46; border-radius: 14px; background: #18181b; color: inherit; }
  .modal p { margin: 0 0 12px; }
</style>
<div style="min-height: 190px;">
  <button class="open" type="button" onclick="this.nextElementSibling.showModal()">Odbierz nagrodę</button>
  <dialog class="modal">
    <p>Zdobywasz 50 EXP za ukończenie modułu!</p>
    <form method="dialog"><button>Super</button></form>
  </dialog>
</div>

Podgląd

Kliknij „Odbierz nagrodę”. Okno pojawia się płynnie, bo @starting-style podaje stan początkowy. Zamyka się od razu: płynne zamykanie wymaga jeszcze display z allow-discrete w przejściu, jak w przykładzie niżej.

Definicja i zastosowanie

Przejście (transition) potrzebuje dwóch stanów: poprzedniego i nowego. Element, który właśnie trafił na stronę albo przestał mieć display: none, nie ma stanu poprzedniego, więc przeglądarka od razu pokazuje go w docelowym wyglądzie. Reguła @starting-style dostarcza brakujący stan: od tych stylów przejście startuje przy pierwszym wyświetleniu elementu.

Zapis jest prosty. Elementowi nadajesz docelowe style i transition, a w @starting-style powtarzasz selektor z wartościami startowymi, np. opacity: 0 i translate: 0 20px. Regułę można zapisać osobno albo zagnieździć w selektorze. Style startowe nie mają wyższej specyficzności, więc blok @starting-style stawiaj po regule docelowej.

Najczęściej łączy się ją z transition-behavior: allow-discrete dla właściwości display. Wtedy element nie tylko płynnie się pojawia, ale też płynnie znika, bo display: none włącza się dopiero po zakończeniu przejścia. W ten sposób animuje się okna <dialog> i elementy z atrybutem popover.

Reguła dotyczy wyłącznie przejść. Animacje @keyframes same startują, gdy element się pojawia, więc stanu początkowego nie potrzebują. Przeglądarka, która nie zna @starting-style, po prostu pokaże element od razu, bez żadnego błędu.

Składnia

selektor {
  transition: opacity 0.3s;
}

@starting-style {
  selektor { opacity: 0; }
}

Efekty wejścia

opacity: 0
płynne pojawienie
Element pojawia się co chwilę na nowo i za każdym razem zaczyna od pełnej przezroczystości. Znika natychmiast, bo wyjście nie jest animowane.
translate: 0 24px
wjazd od dołu
Start 24 px niżej i z przezroczystością. Element wsuwa się na swoje miejsce, jak powiadomienie.
scale: 0.3
wyskok ze sprężyną
Element startuje pomniejszony, a krzywa cubic-bezier z wartością powyżej 1 daje lekkie przestrzelenie, jak przy sprężynie.
filter: blur(8px)
wyostrzenie, zapis zagnieżdżony
Regułę można zagnieździć w selektorze elementu. Deklaracje w środku dotyczą wtedy tego samego elementu, a kolejność jest poprawna sama z siebie.
bez @starting-style
brak animacji
Samo transition nie wystarczy. Element nie ma stanu poprzedniego, więc przejście nie ma skąd wystartować i element pojawia się od razu.
display + allow-discrete
wejście i wyjście
Z allow-discrete przy display przeglądarka czeka z ukryciem elementu do końca przejścia. Element płynnie się pojawia i płynnie znika.
[popover]
okienko popover
Kliknij przycisk. Otwarty popover dopasowuje :popover-open, a @starting-style sprawia, że wjeżdża od dołu. Zamkniesz go kliknięciem obok albo klawiszem Esc.

Styl startowy	Efekt	Opis
opacity: 0	płynne pojawienie	Element pojawia się co chwilę na nowo i za każdym razem zaczyna od pełnej przezroczystości. Znika natychmiast, bo wyjście nie jest animowane.
translate: 0 24px	wjazd od dołu	Start 24 px niżej i z przezroczystością. Element wsuwa się na swoje miejsce, jak powiadomienie.
scale: 0.3	wyskok ze sprężyną	Element startuje pomniejszony, a krzywa `cubic-bezier` z wartością powyżej 1 daje lekkie przestrzelenie, jak przy sprężynie.
filter: blur(8px)	wyostrzenie, zapis zagnieżdżony	Regułę można zagnieździć w selektorze elementu. Deklaracje w środku dotyczą wtedy tego samego elementu, a kolejność jest poprawna sama z siebie.
bez @starting-style	brak animacji	Samo `transition` nie wystarczy. Element nie ma stanu poprzedniego, więc przejście nie ma skąd wystartować i element pojawia się od razu.
display + allow-discrete	wejście i wyjście	Z `allow-discrete` przy `display` przeglądarka czeka z ukryciem elementu do końca przejścia. Element płynnie się pojawia i płynnie znika.
[popover]	okienko popover	Kliknij przycisk. Otwarty popover dopasowuje `:popover-open`, a `@starting-style` sprawia, że wjeżdża od dołu. Zamkniesz go kliknięciem obok albo klawiszem Esc.

Efekty wejścia w praktyce

opacity: 0

Element pojawia się co chwilę na nowo i za każdym razem zaczyna od pełnej przezroczystości. Znika natychmiast, bo wyjście nie jest animowane.

.demo { transition: opacity 0.6s; }

@starting-style {
  .demo { opacity: 0; }
}

translate: 0 24px

Start 24 px niżej i z przezroczystością. Element wsuwa się na swoje miejsce, jak powiadomienie.

.demo {
  transition: opacity 0.6s, translate 0.6s;
}

@starting-style {
  .demo { opacity: 0; translate: 0 24px; }
}

scale: 0.3

Element startuje pomniejszony, a krzywa cubic-bezier z wartością powyżej 1 daje lekkie przestrzelenie, jak przy sprężynie.

.demo {
  transition: scale 0.5s cubic-bezier(0.3, 1.6, 0.6, 1);
}

@starting-style {
  .demo { scale: 0.3; }
}

filter: blur(8px)

Regułę można zagnieździć w selektorze elementu. Deklaracje w środku dotyczą wtedy tego samego elementu, a kolejność jest poprawna sama z siebie.

.demo {
  transition: opacity 0.6s, filter 0.6s;

  @starting-style {
    opacity: 0;
    filter: blur(8px);
  }
}

bez @starting-style

Samo transition nie wystarczy. Element nie ma stanu poprzedniego, więc przejście nie ma skąd wystartować i element pojawia się od razu.

.demo { transition: opacity 0.6s; }

display + allow-discrete

Z allow-discrete przy display przeglądarka czeka z ukryciem elementu do końca przejścia. Element płynnie się pojawia i płynnie znika.

.demo {
  transition: opacity 0.6s,
    display 0.6s allow-discrete;
}
.demo.hidden { opacity: 0; }

@starting-style {
  .demo { opacity: 0; }
}

[popover]

Kliknij przycisk. Otwarty popover dopasowuje :popover-open, a @starting-style sprawia, że wjeżdża od dołu. Zamkniesz go kliknięciem obok albo klawiszem Esc.

[popover]:popover-open {
  transition: opacity 0.3s, translate 0.3s;
}

@starting-style {
  [popover]:popover-open {
    opacity: 0;
    translate: 0 16px;
  }
}

Więcej przykładów

Okno, które płynnie się otwiera i zamyka

CSS

.modal {
  opacity: 0;
  translate: 0 24px;
  transition:
    opacity 0.3s,
    translate 0.3s,
    display 0.3s allow-discrete,
    overlay 0.3s allow-discrete;
}

.modal[open] {
  opacity: 1;
  translate: 0;
}

@starting-style {
  .modal[open] {
    opacity: 0;
    translate: 0 24px;
  }
}

HTML przykładu

<style>
  .open, .modal button { padding: 8px 14px; border: 0; border-radius: 8px; background: #7c3aed; color: #fff; font: inherit; cursor: pointer; }
  .modal { padding: 18px 20px; border: 1px solid #3f3f46; border-radius: 14px; background: #18181b; color: inherit; }
  .modal p { margin: 0 0 12px; }
</style>
<div style="min-height: 190px;">
  <button class="open" type="button" onclick="this.nextElementSibling.showModal()">Pokaż wskazówkę</button>
  <dialog class="modal">
    <p>Flexbox układa elementy w jednym wymiarze, a Grid w dwóch.</p>
    <form method="dialog"><button>Rozumiem</button></form>
  </dialog>
</div>

Podgląd

Okno wjeżdża od dołu i tak samo znika. display z allow-discrete czeka z ukryciem do końca przejścia, a overlay tam, gdzie przeglądarka go obsługuje, trzyma zamykane okno nad stroną do końca animacji.

Obsługa przeglądarek

Nowość w przeglądarkach · od 2024 roku

Działa w aktualnych wersjach wszystkich głównych przeglądarek. Starsze wersje mogą tego nie obsługiwać.

Chrome
Edge
Firefox
Safari

Dobre praktyki

Blok @starting-style stawiaj po regule, którą animujesz, albo zagnieźdź go w niej. Style startowe nie mają wyższej specyficzności, więc reguła zapisana później by je nadpisała.
Do płynnego znikania dodaj do przejścia display z allow-discrete, a przy oknach dialogowych i popoverach także overlay. Samo @starting-style obsługuje tylko wejście.
Zwykłe przejścia hover nie potrzebują tej reguły. Sięgaj po nią tylko wtedy, gdy element pojawia się na stronie albo wychodzi z display: none.

Powiązane hasła

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz CSS w kursie HTML i CSSZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs