html - 将 CSS 过渡设置为使用速度而不是持续时间?

标签 html css css-transitions

是否可以将 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/

相关文章:

css - 过渡在 Firefox 或 Opera 中不起作用,仅在 Chrome 中起作用

jquery - CSS 过渡 Chrome 问题

javascript - 在重新加载页面后,在 Angular js 中,使用 $locationProvider.html5Mode(true); 后,服务器上出现错误 404 找不到页面;

php - 如何在 php 中将 html 转换为 doc

css - 如何在页面缩小时将 DIV 保持在同一位置

html - CSS 表单 ie7 错误,左边距和 float

html - 内容旁边显示的额外空间

HTML 电子邮件 : put transparent background color on image and text on it

html - 灯塔报告;目标大小不合适

javascript - 每次元素滚动到视口(viewport)时触发事件