???? ?? ?????? ??? ?? ??? ? ????. DOM ?? ??? display: none ?????? ????? ?? ????? ??? ???? ??? ????. @starting-style ??? ??? ?? ??? ? CSS ??? ?? ?? ????? ???? ???? ??? ??? ?????? ???? ???? ?????.

? ?? ??? ??? ?? ??? ???? ?????.

??? ??

@starting-style? ??? ???? ? CSS ??? ?? ??, ? '?' ??? ?????. "??" ??? ?? CSS ??? ???? ????. ?? ??? ??? ????.

element {
  transition: opacity 0.5s ease-in;
  opacity: 1;

  @starting-style {
    opacity: 0;
  }
}

?? ?? ? @starting-style? ??? ????? 0?? ?????. ?? ?? ?? ??(? ?? ????: 1)? ???? ?????. ? ??? ??? display: none?? ??? ??? ?? ????? ??? ??? ?????? ???? ? ?????.

??@starting-style

@starting-style? ? ?? ???? ??? ? ????. ?, ??? ?? ?? ?? ?????(???? ?? ??) ???? ??? ??? ? ????.

?? ??: ?? ??(?: @starting-style ?? ::before) ?? ::after? ???? ??? ?? ???? ????. ???? ?? ??? ?? ?? ??? ??? ????.

/* Standalone */
@starting-style {
  element {
    opacity: 0;
  }
}

element {
  opacity: 1;
  transition: opacity 0.5s ease-in;
}

/* Nested */
element {
  opacity: 1;
  transition: opacity 0.5s ease-in;

  @starting-style {
    opacity: 0;
  }
}

?? ?? ??: @starting-style? "?? ??"? ??? ???? ????. ???? ??? ?? ?? "?? ??"@starting-style ?? at ?????

?????.

??? ??

@starting-style ?? ??? ??? ??? ? ?????. ??? ?? ? ???? ??? ???? ?? ? ?? ??? ?????? ???? ? ???? ?? ??? ???. ??? ? ?? ????.

display: none

@starting-style? ?? ??? ??? ??? ??, ?? display: none?? ???? ??? ?? ???? ??? ??? ?????. @starting-style? ??? ??? ?? ??? ?? ??? ? ??? ?????? ????? ?????. @starting-style? ?? ??? ???? ? ??? ?????.

dialog ??? ??? ??? ?????. ??? display: none? display: block ??? ?????. ????? display ?? ???? ?? ?????? ??? ? ??? @starting-style? ???? ?????.

??? ?? ? ??? ? ????

? ??? @starting-style? ? ?? ??? ?? "??" ??? ?????. ??? ??? ?? ????? 0?? ???? ?? ???? ??? ?? ??? ?????.

? ?? ??? ?????? ??? ?????. ?? ??? @starting-style?? ???? ????. ??? ?????? ?? ?? ?? ??? transition-behavior? ???? ???.

?? ??? ?? ?????. ? ??? ??? ??? ???.

? ??? @starting-style? ?? ????? ???? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!