Могу ли я добавить единицу к значению внутри css calc?

Question

Сейчас я сохраняю значение в DOM, используя javascript:

document.documentElement.style.setProperty('--offset', offset+'px')

, позже я использую его как часть вычисления в анимации:

@keyframes upanim {
    from    {transform: translate3d(0,calc(var(--offset) - 100vh ),0);}
    to  {transform: translate3d(0,0,0);}
}

Теперь я хочу использовать это же значение для расчета скорости анимации, чтобы скорость всегда была равна числу пикселей в секунду:

animation: upanim calc(var(--offset) * 0.002)s cubic-bezier(0, 0, 0.25, 1);

Проблема в том, что 'px' и 's', Я хотел бы вместо этого добавить единицу в расчет и просто сохранить значение в DOM.Это возможно?

Answer 1

Чтобы использовать переменную css без единиц измерения в свойстве, для которого требуются пиксели, необходимо умножить его на 1px

width: calc(var(--offset) * 1px);

Итак, я думаю, что лучшее, что вы можете получить, это установить смещение переменной безразмеры и добавьте следующие размеры при использовании:

В фрагменте наведите курсор на тело, чтобы увидеть элементы, движущиеся с постоянной скоростью:

#t1 {
  --offset: 10;
}
#t2 {
  --offset: 20;
}
#t3 {
  --offset: 40;
}

.test {
  width: 100px;
  height: 40px;
  margin: 5px;
  background-color: antiquewhite;
  transform: translateX(calc(var(--offset) * 1vh));
}

body:hover .test {
  animation: move calc(var(--offset) * 0.2s) linear forwards;
  background-color: lightgreen;
}

@keyframes move {
    from  {transform: translateX(calc(var(--offset) * 1vh));}
      to  {transform: translateX(0);}
}

<div class="test" id="t1">ONE</div>
<div class="test" id="t2">TWO</div>
<div class="test" id="t3">THREE</div>