Дайте совет, как правильно сделать анимацию css свойства filter: drop-shadow(0 0 14px цвет), через javascript?

Question

[Сергей Коноплицкий]

Мне нужно сделать анимацию свойства filter: drop-shadow(0 0 14px red); на изображении формата png. Думал изначально сделать массив цветов из типа rbga, чтоб , было поэтапно, но как бы ничего не получилось. В этом скрипте я каждый раз в цикле присваиваю стиль и это не правильно получается каждый раз цвет пропадает и резко появляется. Может кто подсказать как сделать анимацию у меня должно быть 3 цвета : красный, синий и зелёный. На css через сценарии анимации тоже ничего не вышло. Благодарю за любой ответ.
Ссылка на codpen

Answer 1

[MagnusDidNotBetray]

Что-то такое придумал

let clock = document.querySelector('.clock');
let arrColors = ['rgba(255, 0, 0, .1)','rgba(255, 0, 0, .2)','rgba(255, 0, 0, .3)','rgba(255, 0, 0, .4)','rgba(255, 0, 0, .5)','rgba(255, 0, 0, .6)', 'rgba(255, 0, 0, .7)', 'rgba(255, 0, 0, .8)','rgba(255, 0, 0, .9)', 'rgba(255, 0, 0, 1)'];

const changeColor = (color, delay) => {
  clock.style.filter = `drop-shadow(0 0 14px ${color})`;
  return new Promise((resolve) => setTimeout(resolve, delay));
}
setInterval(async function(func){
  for(let i = 0; i < arrColors.length; i++){
    await func(arrColors[i], 2000);
  }
}, arrColors.length * 2000, changeColor);

Comments

[Сергей Коноплицкий]

Огромное вам спасибо! Хорошего дня.