是否可以将 CSS 过渡设置为使用速度而不是持续时间?
现在,如果我想要一个将元素从另一个元素的左侧移动到右侧的类,速度会发生很大变化。
如果我有短元素并且我想从左向右移动子元素并且持续时间设置为例如1秒,比它移动得真慢。
另一方面,如果我有一个很长的同类元素,那么子元素会以惊人的速度闪烁以满足 1 秒的时间限制。
这确实损害了我的 CSS 模块化,所以我想知道在这种情况下是否有办法使转换保持一致。
最佳答案
不,没有 transition-speed
css 属性,但是有 transition-timing-function-property
如果您使用该功能,您可以设置相对于持续时间的过渡速度,也可以使用步长。根据规范:
The ‘transition-timing-function’ property describes how the intermediate values used during a transition will be calculated. It allows for a transition to change speed over its duration. These effects are commonly called easing functions. In either case, a mathematical function that provides a smooth curve is used.
Timing functions are either defined as a stepping function or a cubic Bézier curve. The timing function takes as its input the current elapsed percentage of the transition duration and outputs the percentage of the way the transition is from its start value to its end value. How this output is used is defined by the interpolation rules for the value type.
A stepping function is defined by a number that divides the domain of operation into equally sized intervals. Each subsequent interval is a equal step closer to the goal state. The function also specifies whether the change in output percentage happens at the start or end of the interval (in other words, if 0% on the input percentage is the point of initial change).
我相信这个转换计时函数属性是最接近您想要的东西,但我知道它与速度属性不同。
关于html - 将 CSS 过渡设置为使用速度而不是持续时间?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34711237/