能否用CSS calc()与vh计算动画时长？表达式失效求助

嘿，这个问题我之前做滚动动画的时候也踩过坑，咱们来一步步捋清楚哈！

为什么你的upanim写法无效？ #

主要有两个核心原因：

• 动画时长不能为负数：CSS里animation-duration是不接受负值的！当你的var(--offset)小于100vh时，var(--offset) - 100vh会算出负数，再乘以0.0004s还是负的，浏览器直接判定这个时长无效，自然不会执行upanim动画。
• 单位运算不兼容：如果你的--offset是不带单位的纯数字（比如用来标记滚动的像素数/倍数），直接和带单位的100vh相减会触发CSS calc的运算错误——CSS不允许无单位数值和带单位数值直接做加减，这也是你第二种写法失效的关键。

解决办法 #

针对这两个问题，给你几个可行的方案：

1. 用max()强制时长非负 #

不管var(--offset)是带单位还是纯数字，先把计算结果限制为正数，确保浏览器能识别有效时长：

/* 假设--offset是带vh单位的数值 */
animation: upanim calc(max(var(--offset) - 100vh, 0) * 0.0004s);

/* 如果--offset是纯数字，先转成vh单位再运算 */
animation: upanim calc(max((var(--offset) * 1vh) - 100vh, 0) * 0.0004s);

这里的max(a, 0)会取a和0里的较大值，避免出现负数时长。如果不想让时长为0（比如希望哪怕移动距离为0也有个极小的动画），可以把0改成0.001s这类极小值。

2. 确保单位完全统一 #

如果你的--offset是用来表示距离的变量，尽量统一用相同单位：

• 比如如果滚动距离用vh做单位，那--offset就存带vh的数值（比如--offset: 150vh），这样和100vh相减就不会有单位问题；
• 如果用纯数字，记得运算前先乘以对应的单位（比如1vh），把它转成带单位的长度值再参与计算。

3. 调试小技巧 #

遇到calc运算失效时，打开浏览器开发者工具的CSS面板，查看这个动画属性的计算结果：如果结果是红色的，要么是单位不匹配，要么是出现了非法数值（比如负数），对着改就行~

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