设置css过渡到每秒像素 [英] set css transition to pixel per second

问题描述

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

So, 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.

另一方面，如果我有一个非常长的元素具有相同的类，那么sub元素以令人难以置信的速度闪烁，以满足时间限制为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属性， a href =http://www.w3.org/TR/css3-transitions/#transition-timing-function-property =nofollow> transition-timing-function-property

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:

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

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

我相信这个过渡时间函数属性是你最想要的意识到它与速度属性不同。

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屋！