Material UI中CSS关键帧动画重置初始transform值的解决咨询

这是因为CSS动画的transform属性会完全覆盖元素本身的transform设置——当你在@keyframes的0%阶段只写scale(1)时，相当于把之前的rotate(45deg)给覆盖掉了，所以动画启动前旋转会被重置。

有两种简单的解决方法，不用每次在动画里重复写rotate：

方法1：用CSS变量分离旋转与缩放 #

把缩放值抽成CSS变量，初始transform同时保留旋转和变量控制的缩放，动画只修改变量值：

<Box
  sx={{
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    width: "10vh",
    height: "10vh",
    border: "1px solid",
    borderColor: "tertiary.main",
    // 初始transform：固定旋转 + 变量控制缩放
    transform: "rotate(45deg) scale(var(--scale, 1))",
    animation: "expand 500ms linear forwards",
    animationDelay: "2s",
    "@keyframes expand": {
      "0%": {
        // 只修改缩放变量，不碰旋转
        "--scale": 1,
      },
      "100%": {
        "--scale": 12,
      },
    },
  }}
>
</Box>

这样元素的旋转状态会一直保留，动画只负责调整缩放比例，完全不用重复写rotate。

方法2：嵌套元素分离旋转与动画 #

外层元素负责固定旋转，内层元素单独做缩放动画，两者的transform互不干扰：

<Box
  sx={{
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    transform: "rotate(45deg)", // 外层固定旋转
  }}
>
  <Box
    sx={{
      width: "10vh",
      height: "10vh",
      border: "1px solid",
      borderColor: "tertiary.main",
      animation: "expand 500ms linear forwards",
      animationDelay: "2s",
      "@keyframes expand": {
        "0%": { transform: "scale(1)" },
        "100%": { transform: "scale(12)" },
      },
    }}
  >
  </Box>
</Box>

这种方式逻辑更清晰，外层管旋转，内层管缩放动画，完全避免了transform属性的覆盖冲突。

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