设置 CSS 过渡以使用速度而不是持续时间？

Question

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

现在，如果我想要一个 class 将元素从另一个元素的左侧移动到右侧，速度会发生很大变化。

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

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

这确实损害了我的 CSS 模块化，所以我想知道在这种情况下是否有办法使转换保持一致。

Answer 1

不，没有transition-speedcss属性，但是有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).

我相信这个转换计时函数属性是最接近你想要的东西，但我知道它与速度不同属性.

Answer 2

由于无法设置速度，我制作了 2 个样本，其中较小的盒子在样本 1 中移动得稍微快一些，这当然是必须的，因为它在相同的时间范围内移动的距离更长。

在示例 2 中，我通过将较大框的持续时间设置为 3 秒来补偿这一点，它们现在（几乎）具有相同的速度。

最好的方法可能是根据箱子的大小计算行进距离，并使用该值计算所需的持续时间，使箱子无论大小都以相同的速度行进。

.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 无法做到这一点，因此您必须自己计算 JavaScript 中的持续时间并进行设置。

例如，考虑这个动画（具有固定的持续时间，因此速度可变）：

@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>

假设我们希望所有球都以每秒 40 像素的速度前进，而不管包含它们的滑块有多宽。然后我们可以在 JavaScript 中计算生成的动画持续时间，并根据 JavaScript:

设置 animation 样式属性

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>

是的，这有点冗长和烦人，尤其是因为当您有一堆边距、填充和边框时计算行进的距离有时可能会有点……复杂。但是 CSS 目前没有提供任何更好的工具供您使用，所以您只能使用这样的方法。

设置 CSS 过渡以使用速度而不是持续时间？

Set CSS transition to use speed instead of duration?

html

css

css-transitions