property и starting-style

Вышел Firefox 128, а вместе с ним во всех стабильных браузерах теперь доступны директивы @property и @starting-style.

property

Директива @property позволяет управлять характеристиками пользовательских свойств. А именно: типом, наследованием и значением по умолчанию.

@property --width {
  syntax: "<length>";
  inherit: false;
  initial-value: 48px;
}

Определяется пользовательское свойство --width, его значение будет преобразовано к типу <length>, оно не будет наследоваться и по умолчанию будет равно 48px. Это свойство можно будет использовать для анимации в @keyframes. Подробнее о @property.

starting-style

Директива @starting-style даёт возможность задавать стили, которые будут применены при отрисовке элемента, когда значение display меняется с none на другое значение. С помощью этого механизма можно анимировать появление элемента.

[popover]:popover-open {
  opacity: 1; 
  transform: scaleX(1);
}

@starting-style {
  [popover]:popover-open {
    opacity: 0; 
    transform: scaleX(0);
  }
}

Или с использованием вложенности:

[popover]:popover-open {
  opacity: 1; 
  transform: scaleX(1);

  @starting-style {
    opacity: 0; 
    transform: scaleX(0);
  }
}

Когда поповер отобразится, свойства opacity и transform плавно изменят свои значения. Подробнее о @starting-style.