将CSS过渡设置为使用速度而不是持续时间? [英] Set CSS transition to use speed instead of duration?

问题描述

是否可以将CSS过渡设置为使用速度而不是持续时间?

Is it possible to set CSS transition to use speed instead of duration?

现在，如果我想拥有一个将元素从另一个元素的左移到右移的类，则速度会有很大的不同.

Right now, if I want to have a class that moves element from left to right of another element, speed greatly varies.

如果我有短元素，并且我想从左向右移动子元素，并且持续时间设置为例如1秒，它移动的速度真的很慢.

If I have short element and I want to move sub element from left to right and duration is set to e.g. 1sec, than it moves really slow.

另一方面，如果我有一个很长的同级元素，那么子元素会以令人难以置信的速度闪烁，以满足1秒的时间限制.

On the other hand, if I have a very long element with the same class, than sub element flashes through at incredible speed to satisfy time limit of 1sec.

这确实伤害了我的CSS模块化，因此我想知道在这种情况下是否有办法使过渡保持一致.

This really hurts my CSS modularity, so I'd like to know if there's a way to make transitions consistent in such cases.

推荐答案

不，没有transition-speed css属性，但是有一个

No, there is no transition-speed css property, however there is a transition-timing-function-property

如果使用该功能，则可以设置相对于持续时间的过渡速度，也可以使用步长.按照规范:

If you use that function, you can set the speed of the transition relative to the duration, and can use steps as well. As per the spec:

转换时机功能"属性描述了 将计算过渡期间使用的中间值.它 允许过渡以在其持续时间内更改速度.这些 效果通常称为缓动函数.无论哪种情况， 使用提供平滑曲线的数学函数.

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.

一个步进函数由一个数字定义，该数字将 以相等大小的间隔进行操作.随后的每个间隔是 等距目标状态.该函数还指定 输出百分比的变化是发生在开始还是结束时 间隔(换句话说，如果输入百分比的0％是 初始更改点).

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).

我相信此过渡计时功能属性是您想要的最接近的东西，但我知道它与speed属性并不相同.

I believe this transition timing function property is the closest thing to what you want, but I am aware that it's not the same as a speed property.

这篇关于将CSS过渡设置为使用速度而不是持续时间?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！