Reguła @starting-style w CSS

Definicja i użycie

CSS @starting-style Zasada używana jest do zdefiniowania początkowego stylu elementu przed jego pierwszą aktualizacją stylu.

Można to użyć do tworzenia gładkich efektów wejścia i wyjścia dla elementów takich jak okna modalne, okna modalne lub jakikolwiek element, który staje się widoczny z stanu display: none.

Przykład

Przykład 1

Użycie @starting-stylePoczątkowa przezroczystość pudełka wynosi 0, a następnie spada z góry:

.box {
  width: 150px;
  height: 150px;
  background-color: pink;
  opacity: 1;
  transition: all 0.9s ease;
  @starting-style {
    opacity: 0;
    translate: 0 -80px;
  }
}

Spróbuj sam

Przykład 2

Użycie w oknach modalnych i dialogowych @starting-style:

#myPopover {
  transition: opacity 0.5s ease-in, scale 0.5s ease-in;
  @starting-style {
    opacity: 0;
    scale: 1.1;
  }
}
#myDialog {
  transition: opacity 0.5s ease-in, scale 0.5s ease-in;
  @starting-style {
    opacity: 0;
    scale: 1.1;
  }
}

Spróbuj sam

Gramatyka CSS

@starting-style {
  deklaracje CSS;
}

Wsparcie przeglądarki

Liczby w tabeli oznaczają wersje przeglądarek, które w pełni wspierają tę @ zasadę.