Установить переход CSS на пиксель в секунду

Можно ли настроить CSS-переход на использование скорости вместо продолжительности?

Прямо сейчас, если я хочу иметь класс, который перемещает элемент слева направо другого элемента, скорость сильно варьируется.

Если у меня есть короткий элемент, и я хочу переместить подэлемент слева направо, и длительность установлена, например, например. 1сек, чем он движется очень медленно.

С другой стороны, если у меня очень длинный элемент с тем же классом, то субэлемент мигает с невероятной скоростью, чтобы выдержать ограничение в 1 сек.

Это действительно вредит моей модульности CSS, поэтому я хотел бы знать, есть ли способ сделать переходы согласованными в таких случаях.

Ответ 1

Нет, нет свойства transition-speed css, однако есть transition-timing-function-property

Если вы используете эту функцию, вы можете установить скорость перехода относительно продолжительности, а также можете использовать шаги. Согласно спецификации:

Свойство функции "время перехода" описывает, как будут вычислены промежуточные значения, используемые при переходе. Это позволяет перейти к изменению скорости по длительности. Эти эффекты обычно называются ослабляющими функциями. В любом случае используется математическая функция, обеспечивающая гладкую кривую.

Функции синхронизации определяются либо как ступенчатая, либо кубическая Безье. Функция синхронизации принимает в качестве своего входного прошедший процент от продолжительности перехода и выдает процент перехода от его начального значения к его конечное значение. Как этот выход используется, определяется интерполяцией правила для типа значения.

Пошаговая функция определяется числом, которое делит область с интервалами равного размера. Каждый последующий интервал является равный шаг ближе к состоянию цели. Функция также указывает независимо от того, происходит ли изменение процентной доли в начале или конце интервал (другими словами, если 0% на входном проценте является точка начального изменения).

Я считаю, что это свойство функции времени перехода является самым близким к тому, что вы хотите, но я знаю, что это не то же самое, что свойство скорости.

Ответ 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>

Ответ 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>