将css过渡设置为每秒像素数

Question

那么,是否可以将CSS转换设置为使用速度而不是持续时间？

现在,如果我想要一个将元素从另一个元素的左侧移动到另一个元素的类,速度会发生很大变化.

如果我有短元素并且我想从左到右移动子元素并且持续时间设置为例如1秒,则它移动得非常慢.

另一方面,如果我有一个具有相同类的非常长的元素,则子元素以令人难以置信的速度闪烁以满足1秒的时间限制.

这真的伤害了我的css模块性,所以我想知道在这种情况下是否有办法使转换保持一致.

Answer 1

不，没有transition-speedcss 属性，但是有一个transition-timing-function-property

如果您使用该功能，您可以设置相对于持续时间的过渡速度，也可以使用步骤。根据规范：

'transition-timing-function' 属性描述了如何计算转换期间使用的中间值。它允许过渡在其持续时间内改变速度。这些效果通常称为缓动函数。在任何一种情况下，都会使用提供平滑曲线的数学函数。

计时函数被定义为步进函数或三次贝塞尔曲线。计时函数将转换持续时间的当前经过百分比作为其输入，并输出转换从其开始值到其结束值的方式的百分比。此输出的使用方式由值类型的插值规则定义。

步进函数由一个数字定义，该数字将操作域划分为大小相等的区间。每个后续间隔都向目标状态更近一步。该函数还指定输出百分比的变化是发生在间隔的开始还是结束（换句话说，如果输入百分比的 0% 是初始变化点）。

我相信这个转换时间函数属性最接近你想要的东西，但我知道它与速度属性不同。