Any advice on how to properly animate the css property filter: drop-shadow(0 0 14px color), via javascript?

Question

css

I need to animate the filter property: drop-shadow(0 0 14px red); on a png image. I initially thought to make an array of colors from the rbga type, so that it would be in stages, but it didn’t work out. In this script, I assign a style every time in a cycle, and it does not work out correctly every time the color disappears and suddenly appears. Can someone tell me how to make an animation, I should have 3 colors: red, blue and green. Nothing worked on css through animation scripts either. Thanks for any answer.
Link to codepen

Answer 1

I came up with something

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);