Плавная анимация, не привязанная ни к чему

Question

let i = 1, 
  interval = 500,
  shag = 22;

setInterval(_ => {
  i++;
  document.querySelector('div.cc').style.width = ((i * shag) > 100 ? 100 : (i * shag)) + '%'
}, interval);

div {
  height: 5px;
  background: red;
  width: 0px;
}

<div class='cc'></div>

Создал пример, где interval и shag могут принимать разные значения. Максимальная ширина 100%, минимальная 0%

Ищу решение при котором будут плавная анимация но в тоже время будет успевать за таймингом. В примере, на подобии ползунка к видео, где ширина привязана к таймингу.

Ищу решение только за счет css, ничего не придумал, все что пробовал. Все не то...

Answer 1

Ну а что здесь сложного? Вам нужно чтобы CSS анимация была по времени равна интервалу.

let i = 1,
  interval = 500,
  shag = 22;

document.querySelector('div.cc').style.animationDuration = interval + 'ms';

setInterval(_ => {
  i++;
  /*
  document.querySelector('div.cc').style.width = ((i * shag) > 100 ? 100 : (i * shag)) + '%'
  */
}, interval);

div {
  height: 5px;
  background: red;
  width: 0px;
  animation: anim 500ms linear forwards;
}

@keyframes anim {
  from {
    width: 0px;
  }
  to {
    width: 100%;
  }
}

<div class='cc'></div>

Answer 2

Ну раз вы решили стилями через js сделать, то у стилей есть такая хорошая штука - transition

let i = 1, 
  interval = 500,
  shag = 22;

setInterval(_ => {
  i++;
  document.querySelector('div.cc').style
    .width = ((i * shag) > 100 ? 100 : (i * shag)) + '%'
}, interval);

div {
  height: 5px;
  background: red;
  width: 0px;
  transition: 1s;
}

<div class='cc'></div>

Answer 3

Скорее всего, я опоздал плюс-минус на месяц. Но тут не было ответа с Web Animation API.

А между прочим, решение требует гораздо меньших изменений в исходном коде автора.

let interval = 500,
  shag = 22;

document.querySelector(".cc").animate(
  [
    { width: "0px" },
    { width: "calc( 100dvw - 2rem )" },
  ],
  {
    duration: interval * shag,
    iterations: Infinity,
  },
);

div {
  height: 5px;
  background: red;
}

<div class='cc'></div>

БЛОГ НА HUSL

Плавная анимация, не привязанная ни к чему

Ответы (3 шт):