我试图在calc属性中使用CSS transition-delay函数。
转换延迟似乎使用语法正常工作：
transition-delay: 0.08s;
在计算屏幕尺寸时，calc属性对我有用，但我无法通过这种方式计算时间：
transition-delay: calc(0.08s * 1);
是否可以在没有预处理器的情况下获得此结果？
更新：已解决
这实际上是一种有效的语法，但某些浏览器（包括Firefox和IE）并不支持它。
答案 0 :(得分：2)
确实有效 - calc()预计可用于测量 [1] ，涉及：长度 [2] （{ {1}}，px，em，ex，ch，rem，%，vw，{{1 }}，vh，vmin，vmax等），角度 [3] （mm，{ {1}}，cm，deg），时间 [4] （rad，grad）和甚至频率和整数。
如果您查看下面的小提琴，您可以看到转换时间的基本单位是100毫秒，但我将它乘以20以使用turn实现两秒的最终转换时间。转换时间会相应地修改和计算，没有任何问题。
我怀疑ms在你的情况下“不工作”的原因是（1）因为你正在使用的浏览器不支持测量单位，或者（2）你正在乘以转换时间因子为1，当然返回相同的值;）
scalc()
来源：
更新：我想说calc()很可能主要用于计算浏览器中的长度测量值，而对于其他类型的测量则不太常见，特别是当它是仍然是一个实验性特征以下是我迄今为止进行的一项相当简陋的浏览器测试的结果：
鉴于除了长度以外的测量中普遍缺乏对div {
background-color: #eee;
width: 200px;
height: 200px;
transition: all calc(0.1s * 20) ease-in-out;
}
div:hover {
background-color: #b13131;
}的支持，我建议您坚持使用CSS预处理器或JS（取决于部署首选项）来实现您想要的效果。
答案 1 :(得分：0)
我试过了，它对我来说很好。在这里检查代码
<div id="circle"></div>
#circle{
width:100px;
height:100px;
background:#000;
border-radius:50%;
margin:50px auto;
transition:all calc(1s*2) ease;
}
#circle:hover{
background:#555;
}