ANIMATION > ANIMATABLE PROPERTIES

CSS Variables

Animate CSS variables directly.

CSS Var example
JavaScript
HTML
CSS
xjs('.box').animate({ '--box-width': '200px', duration: 1000, easing: 'ease-in-out' });
<div class="box"></div> 
:root {
  --box-width: 50px;
}
.box {
  width: var(--box-width);
  height: 50px;
  background-color: var(--highlight-color);
  border-radius: 4px;
}
.demo-visual {
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
功能说明：把 CSS 自定义属性（变量）当作可动画属性，适合主题色、尺寸、间距等可配置样式的过渡。