为什么CSS变量在@keyframes中使用时动画无平滑过渡变为跳变效果？

CSS 自定义变量（CSS Variable）默认属于无类型的通用属性，浏览器无法自动识别它存储的是长度、角度还是其他类型的值，因此无法计算两个关键帧之间的变量过渡中间值，只会在关键帧的时间节点直接切换变量值，最终就会出现逐帧跳变的效果。

方案1：使用@property注册自定义变量（推荐） #

通过@property规则主动声明自定义变量的类型、初始值、继承规则后，浏览器就可以识别变量的类型，自动计算过渡帧实现平滑动画。该特性已得到所有现代主流浏览器支持。
你只需要在原有CSS代码前添加以下变量注册代码即可：

@property --x-translate {
  syntax: "<length>";
  initial-value: 0px;
  inherits: false;
}

@property --y-translate {
  syntax: "<length>";
  initial-value: 0px;
  inherits: false;
}

@property --rotation {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

添加完成后你原有使用变量的@keyframes和动画类代码无需任何修改，就可以得到和直接写transform一样的平滑过渡效果。

方案2：变量集中管理+关键帧写transform（兼容旧浏览器） #

如果需要兼容不支持@property的旧版本浏览器，可以将动画参数统一用变量定义在顶层，关键帧内依然写transform属性，既保留变量便于维护的优势，也能保证动画平滑：

/* 所有动画参数集中在这里管理，修改时只需要改这一处即可 */
:root {
  --step1-x: 0px;
  --step1-y: 0px;
  --step1-rot: 0deg;
  --step2-x: 50px;
  --step2-y: -50px;
  --step2-rot: 20deg;
  --step3-x: -50px;
  --step3-y: -50px;
  --step3-rot: -20deg;
}

.var-animation {
  animation: var-animation 3s infinite;
}

@keyframes var-animation {
  0% {
    transform: translate(var(--step1-x), var(--step1-y)) rotate(var(--step1-rot));
  }
  25% {
    transform: translate(var(--step2-x), var(--step2-y)) rotate(var(--step2-rot));
  }
  50% {
    transform: translate(var(--step3-x), var(--step3-y)) rotate(var(--step3-rot));
  }
  100% {
    transform: translate(var(--step1-x), var(--step1-y)) rotate(var(--step1-rot));
  }
}

内容的提问来源于stack exchange，提问作者ZloiGoroh