Question

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

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

如果我有短元素，我想从左到右移动子元素，并将持续时间设置为例如1秒，比移动真的慢。

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

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

Answer 1

不，没有transition-speed css属性，但有transition-timing-function-property

如果使用该功能，则可以设置相对于持续时间的过渡速度，也可以使用步骤。根据规范：

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

定时功能被定义为步进功能或立方体   Bézier曲线。定时功能将电流作为输入   转换持续时间的经过百分比并输出   转换从其起始值到其起始的方式的百分比   最终价值。如何使用此输出由插值定义   值类型的规则。

步进功能由划分域的数字定义   操作成相同大小的间隔。每个后续间隔是a   更接近目标状态。该函数还指定   产出百分比的变化是否发生在开始或结束时   间隔（换句话说，如果输入百分比的0％是   初始变化点。）

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

Answer 2

由于你无法设定速度，我制作了两个样本，其中较小的盒子在样本1中移动得稍快一些，当然这是必须的，因为它在相同的时间范围内有更长的旅行方式。

在样本2中，我通过将较大的盒子的持续时间设置为3s来补偿它，现在它们（几乎）具有相同的速度。

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

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

假设无论球的滑块有多宽，我们都希望球以每秒40px的速度前进。然后，我们可以在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过渡设置为每秒像素数

3 个答案: