@starting-style

Директива @starting-style позволяет задать начальные стили для элемента в момент его появления на странице.

        
          
          .element {  transition: background-color 0.4s ease-in;  background-color: tomato;}@starting-style {  .element {    background-color: orange;  }}
          .element {
  transition: background-color 0.4s ease-in;
  background-color: tomato;
}

@starting-style {
  .element {
    background-color: orange;
  }
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

При вёрстке сайтов бывает нужно привлечь внимание пользователя к появлению элемента на странице. Например, плавно сменить цвет фона блока в момент загрузки сайта. Или сделать открытие диалога плавным и аккуратным. То есть необходимо осуществить переход из начального состояния элемента в основное. При этом сделать это нужно один раз и именно в момент появления элемента на экране.

Чтобы сообщить браузеру, какие должны быть стили у элемента в его начальном состоянии, используется директива @starting-style.

В общем виде синтаксис выглядит так:

        
          
          .element {  /*    Стили для основного состояния элемента.    Будут применены после появления элемента на странице.  */}@starting-style {  .element {    /*      Стили для начального состояния элемента.      Будут применены в момент появления элемента на странице.    */  }}
          .element {
  /*
    Стили для основного состояния элемента.
    Будут применены после появления элемента на странице.
  */
}

@starting-style {
  .element {
    /*
      Стили для начального состояния элемента.
      Будут применены в момент появления элемента на странице.
    */
  }
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Например:

        
          
          .promo-block {  transition: opacity 0.4s ease-in;  opacity: 1;}@starting-style {  .promo-block {    opacity: 0;  }}
          .promo-block {
  transition: opacity 0.4s ease-in;
  opacity: 1;
}

@starting-style {
  .promo-block {
    opacity: 0;
  }
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

В момент загрузки страницы .promo-block будет не виден, так как в начальном состоянии opacity равен нулю. После загрузки страницы применятся стили из основного состояния: opacity будет равен единице и .promo-block отобразится на экране.

@starting-style классно подходит для добавления анимации на открытие диалога или поповера.

Например, с помощью @starting-style мы можем сделать появление диалога более плавным:

        
          
          /* стили для открытого диалога */dialog {  opacity: 1;  scale: 1;  transition:    opacity 0.4s ease-in,    scale 0.4s ease-in,    display 0.4s ease-in allow-discrete;}/* стили для открывающегося диалога */@starting-style {  dialog {    opacity: 0;    scale: 1.1;  }}/* стили для закрывающегося диалога */dialog:not([open]) {  opacity: 0;  scale: 0.8;}
          /* стили для открытого диалога */
dialog {
  opacity: 1;
  scale: 1;
  transition:
    opacity 0.4s ease-in,
    scale 0.4s ease-in,
    display 0.4s ease-in allow-discrete;
}

/* стили для открывающегося диалога */
@starting-style {
  dialog {
    opacity: 0;
    scale: 1.1;
  }
}

/* стили для закрывающегося диалога */
dialog:not([open]) {
  opacity: 0;
  scale: 0.8;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Такой же подход можно применить и для анимации поповера:

        
          
          [popover] {  transition:    opacity 0.4s ease-in,    scale 0.4s ease-in,    translate 0.4s ease-in,    display 0.4s ease-in allow-discrete;}/* стили для открытого поповера */[popover]:popover-open {  opacity: 1;  scale: 1;  translate: 0;}/* стили для открывающегося поповера */@starting-style {  [popover]:popover-open {    opacity: 0;    scale: 0.5;    translate: 0 70px;  }}/* стили для закрывающегося поповера */[popover]:not(:popover-open) {  opacity: 0;  scale: 0.5;  translate: 0 50px;}
          [popover] {
  transition:
    opacity 0.4s ease-in,
    scale 0.4s ease-in,
    translate 0.4s ease-in,
    display 0.4s ease-in allow-discrete;
}

/* стили для открытого поповера */
[popover]:popover-open {
  opacity: 1;
  scale: 1;
  translate: 0;
}

/* стили для открывающегося поповера */
@starting-style {
  [popover]:popover-open {
    opacity: 0;
    scale: 0.5;
    translate: 0 70px;
  }
}

/* стили для закрывающегося поповера */
[popover]:not(:popover-open) {
  opacity: 0;
  scale: 0.5;
  translate: 0 50px;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

💡 CSS-правила внутри @starting-style не вводят нового порядка в каскад стилей. Это означает, что стили внутри @starting-style не обязательно будут «важней» стилей, описанных снаружи. Чтобы гарантировать, что стили начального состояния не будут перезаписаны стилями основного состояния, помещайте @starting-style после объявлений основных стилей элемента.