Set CSS transition to use speed instead of duration?

Question

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.

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.

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.

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

Answer 1

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.

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

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.