Material UI中WebKit滚动条CSS动画无法实现缓动效果问题排查

问题根源 #

你当前通过keyframes切换CSS变量--var1的方式，无法让WebKit滚动条的::-webkit-scrollbar-thumb正确响应平滑过渡，导致显示/隐藏瞬间切换。实际上，借助@property定义可动画变量后，直接用transition就能实现预期的缓动效果，无需复杂的关键帧动画。

修改后的代码 #

const ShowsRow = ({ children, genre }) => {
  return (
    <Paper
      sx={{
        border: { border },
        maxHeight: "min(30%, 400px)",
        padding: "min(1%, 20px) 0",
        borderRadius: "0",
        transition: "background-color 0.3s ease-in-out, --var1 0.3s ease-in-out",
        backgroundColor: "rgba(0, 0, 0, 0)",
        "@property --var1": {
          syntax: "<color>",
          inherits: true,
          initialValue: "transparent",
        },
        "--var1": "transparent",
        "&:hover": {
          backgroundColor: "rgba(0, 0, 0, 0.30)",
          "--var1": "rgba(0, 0, 0, 0.30)",
        },
      }}
      elevation={2}
    >
      <Typography
        variant="h5"
        sx={{ fontWeight: "bold", padding: "0 0 min(1%, 20px) min(1%, 20px)" }}
      >
        {genre}
      </Typography>
      <Box
        sx={{
          display: "flex",
          flexDirection: "row",
          alignItems: "flex-start",
          border: { border },
          gap: "min(3%, 20px)",
          width: "100%",
          overflowX: "scroll",
          overflowY: "hidden",
          padding: "0 min(1%, 20px)",
          "&::-webkit-scrollbar": {
            height: "0.8em",
            background: "transparent",
          },
          "&::-webkit-scrollbar-thumb": {
            background: "var(--var1)",
            borderRadius: "1em",
            transition: "background 0.3s ease-in-out",
          },
        }}
      >
        {children}
      </Box>
    </Paper>
  );
};

关键调整点 #

• 移除冗余的fadeIn/fadeOut关键帧，用transition直接监听CSS变量--var1的变化
• 将--var1初始值从inherit改为transparent，避免继承逻辑导致的过渡失效
• 在Paper的transition属性中添加--var1 0.3s ease-in-out，让变量值变化时触发平滑过渡
• 给::-webkit-scrollbar-thumb单独添加过渡规则，提升部分浏览器的兼容性

原理说明 #

通过@property定义的CSS变量具备可动画特性，hover时直接修改变量值，配合transition就能实现滚动条滑块背景色的自然淡入淡出，这种方式比关键帧动画更简洁且兼容性更强。

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