CSS linear()缓动函数多行写法失效问题求助

编辑：补充完整HTML代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        display: flex;
        width: 100vw;
        height: 100vh;
        justify-content: center;
        align-items: center;
      }
      #box {
        width: 400px;
        height: 200px;
        background-color: rgb(255, 93, 93);

        /* 正常生效的linear写法 */
        /* transition: transform 0.5s linear(0, 0.5 25%, 1); */

        /* 失效的linear写法 */
        transition: transform 0.5s
          linear(
            0,
            0.009,
            0.035 2.1%,
            0.141,
            0.281 6.7%,
            0.723 12.9%,
            0.938 16.7%,
            1.017,
            1.077,
            1.121,
            1.149 24.3%,
            1.159,
            1.163,
            1.161,
            1.154 29.9%,
            1.129 32.8%,
            1.051 39.6%,
            1.017 43.1%,
            0.991,
            0.977 51%,
            0.974 53.8%,
            0.975 57.1%,
            0.997 69.8%,
            1.003 76.9%,
            1.004 83.8%,
            1
          );
      }
      #box:hover {
        transform: scale(1.1);
      }
    </style>
  </head>
  <body>
    <div id="box">Hover Me</div>
  </body>
</html>

我设置CSS transition属性如下：

.box {
  /* 其他样式 */

  transition: transform 0.85s
    linear(
      0,
      0.0346 2.07%,
      0.1407 4.43%,
      0.9383 16.72%,
      1.0774 20.43%,
      1.1493 24.31%,
      1.1629 26.95%,
      1.1536 29.93%,
      1.0168 43.09%,
      0.9766 51%,
      1.0033 76.88%,
      1
    );
}

此时浏览器中过渡效果失效；但将linear()写成单行形式：

.box {
  /* 其他样式 */

  transition: transform 0.85s linear(0, 0.0346 2.07%, 1.0033 76.88%, 1);
}

过渡效果即可正常工作。我无法使用多行格式的长参数linear缓动函数，目前通过CSS-in-JS库emotion将缓动函数定义为字符串变量解决了该问题：

--spring-easing: ${`linear(0, 0.0025 1.75%, 0.004 2.29%, 0.0099 3.55%, 0.0197 4.92%, 0.0341 6.4%,
      0.0533 7.84%, 0.0744 9.06%, 0.0738 9.06%, 0.1003 10.32%, 0.1281 11.41%,
      0.1598 12.44%, 0.194 13.37%, 0.231 14.21%, 0.2714 14.97%, 0.3447 16.05%,
      0.344 16.05%, 0.4768 17.47%, 0.5443 18.34%, 0.6069 19.39%, 0.6604 20.61%,
      0.6897 21.46%, 0.7167 22.4%, 0.7419 23.44%, 0.7653 24.59%, 0.7876 25.87%,
      0.8083 27.28%, 0.8272 28.79%, 0.8448 30.42%, 0.8649 32.63%, 0.8656 32.71%,
      0.8645, 0.8656 32.72%, 0.8686 33.08%, 0.8833 35.06%, 0.8888 35.86%, 0.8876,
      0.8888 35.87%, 0.9002 37.72%, 0.9009 37.83%, 0.9001 37.83%, 0.9039 38.37%,
      0.9155 40.62%, 0.9295 43.79%, 0.9421 47.24%, 0.9533 50.97%, 0.9633 54.99%,
      0.972 59.33%, 0.9795 64.01%, 0.9858 69.04%, 0.9909 74.43%, 0.9949 80.2%,
      0.9977 86.37%, 1
    );`};

请问是否有其他修复方法？该问题是否属于格式化工具的bug？

修复方法 #

除了CSS-in-JS的方案，还有两种可行思路：

1. 用CSS变量存储缓动函数：先在全局或目标元素中定义包含完整linear缓动的变量，再在transition中引用，既保留代码可读性，又避免语法解析问题：

:root {
  --custom-easing: linear(0, 0.0346 2.07%, 0.1407 4.43%, 0.9383 16.72%, 1.0774 20.43%, 1.1493 24.31%, 1.1629 26.95%, 1.1536 29.93%, 1.0168 43.09%, 0.9766 51%, 1.0033 76.88%, 1);
}

.box {
  transition: transform 0.85s var(--custom-easing);
}

2. 调整格式化规则：修改CSS格式化工具的配置，让linear()函数内部的参数保持单行，或者将多行自动转换为单个空格分隔的有效格式，避免引入浏览器无法解析的多余空白。

是否是格式化工具的bug？ #

是的，这属于格式化工具的逻辑缺陷。CSS规范允许函数参数内部存在换行（会被视为空白字符），但部分工具在拆分linear()参数为多行时，可能引入了过多缩进或无效空白，导致浏览器无法正确识别完整的缓动函数参数。合格的CSS格式化工具应该确保函数内部的换行被转换为有效空格，同时不破坏语法结构。

内容的提问来源于stack exchange，提问作者신범기