css动画transform 传入变量

可以使用CSS变量（也称为自定义属性）来实现将变量传递给CSS动画的transform属性。以下是一个示例：

HTML:

<div id="box"></div>

CSS:

:root {
  --translate-x: 100px;
}

#box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: move 2s forwards;
}

@keyframes move {
  to {
    transform: translateX(var(--translate-x));
  }
}

在这个例子中，我们使用了名为“--translate-x”的CSS变量来表示X轴上的平移距离。在:root伪类中定义的该变量可以在整个文档中使用。在动画中，我们使用了transform: translateX(var(--translate-x))属性来将--translate-x的值传递给CSS动画。最后，我们在#box元素中应用了move动画。

如果需要更改平移距离，只需更改--translate-x变量的值即可。例如：

:root {
  --translate-x: 200px;
}

这将使元素向右平移200像素。