CSS анимация пользовательских свойств/переменных

Этого можно добиться, определив переменные с помощью (на момент написания статьи, плохо поддерживаемой) @property. , что позволяет объявлять типы и позволяет браузеру понять, например, что определенное свойство (переменная) является Числом, а затем он может постепенно анимировать/перемещать эту переменную возможно.

Пример кода:

@property --opacity {
  syntax: '<number>'; /* <- defined as type number for the transition to work */
  initial-value: 0;
  inherits: false;
}

@keyframes fadeIn {
  50%{ --opacity: 1 }
}

html{
  animation: 2s fadeIn infinite;  /* "forwards pesists the last keyframe styles */
  background: rgba(0 0 0 / var(--opacity));
}

Текущие разрешенные типы включают:

• length
• number
• percentage
• length-percentage
• color
• image
• url
• integer
• angle
• time
• resolution
• transform-list
• transform-function
• custom-ident (строка пользовательского идентификатора)

Полезные статьи:

1. https://web.dev/at-property/#writing-houdini-custom-properties
2. https://css-tricks.com/using-property-for-css-custom-properties
3. крутые демонстрации Houdini

Как указано в спецификации:

Анимация: нет

а также

Примечательно, что их можно даже перемещать или анимировать, но, поскольку ПА не имеет возможности интерпретировать их содержимое, они всегда используют поведение переворотов на 50%, которое используется для любого другая пара значений, которые не могут быть разумно интерполированы. Однако любое настраиваемое свойство, используемое в правиле @keyframes, становится испорченным анимацией, что влияет на то, как оно обрабатывается при обращении к нему через функцию var() в свойстве анимации.

Таким образом, даже если вы используете opacity с var() в ключевых кадрах, анимация не произойдет:

@keyframes test {
  from {
    --one:0;
    opacity: var(--one);
  }
  to {
    opacity: var(--one);
    --one: 1;
  }
}

#test {
  width: 100px;
  height: 200px;
  background-color: black;
}

#test :nth-child(1) {
  width: 20px;
  height: 20px;
  margin: auto;
  background-color: white;
  animation: test 1s  infinite;
  
}

<div id="test">
  <div></div>
</div>

Кстати, вы можете заставить его работать, если используете его как transition, потому что в этом случае вы будете применять переход к непрозрачности, а не к пользовательскому свойству:

#test {
  width: 100px;
  height: 200px;
  background-color: black;
}

#test:hover {
  --one:1;
}

#test :nth-child(1) {
  width: 20px;
  height: 20px;
  margin: auto;
  background-color: white;
  opacity: var(--one,0);
  transition:1s all;
}

<div id="test">
  <div></div>
</div>