Set CSS transition to pixel per second

Question

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

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

If I have a short element and I want to move the sub-element from left to right, and the duration is set, for example, for example. 1 second than it is moving very slowly.

On the other hand, if I have a very long element with the same class, then the sub-element blinks at an incredible speed to withstand a limit of 1 second.

This really hurts my CSS modularity, so I would like to know if there is 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 this function, you can set the transition speed relative to the duration, and you can also use steps. According to specification:

The "transition time" function property describes how the intermediate values ​​used in the transition will be calculated. This allows you to switch to a change in speed in duration. These effects are commonly called debilitating functions. In any case, a mathematical function is used that provides a smooth curve.

The synchronization functions are defined as either stepwise or cubic Bezier. The synchronization function takes as its input the passed percentage of the transition duration and gives the percentage of transition from its initial value to its final value. How this output is used is determined by interpolating the rule for the value type.

The step-by-step function is determined by a number that divides the area at intervals of equal size. Each subsequent interval is an equal step closer to the state of the target. The function also indicates whether a percentage change occurs at the beginning or end of the interval (in other words, if 0% at the input percentage is the point of initial change).

I believe that this property of the transition time function is closest to what you want, but I know that this is not the same as the property of speed.

Answer 2

Since you cannot set the speed, I made 2 samples where the smaller box moves a little faster in sample 1, which of course matters because it has a longer way of moving within the same time interval.

In Example 2, I compensated for this by setting the drawer to a longer duration of 3 s, where they now (almost) have the same speed.

The best way is probably to calculate the distance to travel based on the size of the window, and use this value to calculate the required duration to make the boxes, regardless of size, move at the same speed.

 .div1 div { width: 100px; height: 100px; background-color: red; position: relative; animation-name: example1; animation-duration: 4s; animation-iteration-count: infinite; animation-timing-function: linear; } .div2 div { width: 200px; height: 200px; background-color: blue; position: relative; animation-name: example2; animation-duration: 4s; animation-iteration-count: infinite; animation-timing-function: linear; } @keyframes example1 { 0% {left:0px; top:0px;} 100% {left:400px; top:0px;} } @keyframes example2 { 0% {left:0px; top:0px;} 100% {left:300px; top:0px;} } .div3 div { width: 100px; height: 100px; background-color: red; position: relative; animation-name: example3; animation-duration: 4s; animation-iteration-count: infinite; animation-timing-function: linear; } .div4 div { width: 200px; height: 200px; background-color: blue; position: relative; animation-name: example4; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: linear; } @keyframes example3 { 0% {left:0px; top:0px;} 100% {left:400px; top:0px;} } @keyframes example4 { 0% {left:0px; top:0px;} 100% {left:300px; top:0px;} } 

 <br>Sample 1<br> <div class="div1"> <div></div> </div> <div class="div2"> <div></div> </div> <br>Sample 2<br> <div class="div3"> <div></div> </div> <div class="div4"> <div></div> </div> 

Answer 3

CSS offers no way to do this, so you have to calculate the duration in JavaScript yourself and set it.

For example, consider this animation (with a fixed duration and, therefore, with a variable speed):

 @keyframes slideball { 0% { margin-left: 0px; } 100% { margin-left: calc(100% - 30px); } } .slider { height: 30px; background: blue; border-radius: 20px; margin: 10px; padding: 5px; } #slider1 { width: 80px; } #slider2 { width: 200px; } #slider3 { width: 500px; } .ball { height: 30px; width: 30px; border-radius: 30px; background: red; animation: slideball linear 10s forwards; } 

 <div id="slider1" class="slider"> <div class="ball"></div> </div> <div id="slider2" class="slider"> <div class="ball"></div> </div> <div id="slider3" class="slider"> <div class="ball"></div> </div> 

Suppose we want all the balls to move at a speed of 40 pixels per second, regardless of the width of the slider in which they are located. Then we can calculate the resulting animation duration in JavaScript and set the animation style property from JavaScript:

 function startAnimation(slider) { const ball = slider.children[0], speed = 40, // px per second distancePx = ( slider.offsetWidth - parseInt(getComputedStyle(slider).paddingLeft) - parseInt(getComputedStyle(slider).paddingRight) - ball.offsetWidth ), duration = distancePx / speed; ball.style.animation = 'slideball linear ${duration}s forwards'; } startAnimation(document.getElementById('slider1')); startAnimation(document.getElementById('slider2')); startAnimation(document.getElementById('slider3')); 

 @keyframes slideball { 0% { margin-left: 0px; } 100% { margin-left: calc(100% - 30px); } } .slider { height: 30px; background: blue; border-radius: 20px; margin: 10px; padding: 5px; } #slider1 { width: 80px; } #slider2 { width: 200px; } #slider3 { width: 500px; } .ball { height: 30px; width: 30px; border-radius: 30px; background: red; } 

 <div id="slider1" class="slider"> <div class="ball"></div> </div> <div id="slider2" class="slider"> <div class="ball"></div> </div> <div id="slider3" class="slider"> <div class="ball"></div> </div> 

Yes, this is a bit verbose and annoying, especially because calculating the distances traveled when you have a bunch of fields, indents and borders, and such things can sometimes get a little ... confusing. But CSS does not currently offer you the best tool to use, so you are stuck with such approaches.