Как сделать зацикленную анимацию градиента на иконках?

Question

[ParaBellum577]

Суть вопроса: есть у меня 15 серых иконок расположенных в ряд. Нужно пустить по ним зацикленный градиент, вроде как блик чтобы пробегал слева на право. Как это можно реализовать? Просто не сталкивался ранее с таким вопросом. Иконки SVG

Answer 1

[h88p]

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

setInterval(_=>{
   icons.forEach(function(element, i){
      setTimeout(function(){
         element.style.color = 'white'
         setTimeout(_=>{
              element.style.color = 'green'
          }, 400)
      }, 240 * ++i)
   });
}, icons.length*200 + 800)

Примерно так или как ответил человек в комментариях :)

Comments

[hzzzzl]

я недавно такую рисовал как раз тут
https://codepen.io/anon/pen/xNxNKw?editors=1010

[ParaBellum577]

спасибо, буду пробовать)

Answer 2

[ParaBellum577]

componentDidMount() {
    const icon = document.querySelectorAll('.icon-effect')
    let current = 0
    setInterval(() => {
      current = (current + 1) % icon.length
      icon[current].classList.toggle('active-icon')
    }, 3000)
   }

+ transition: 2.35s ease-in-out;
Получилось именно то, что и было нужно. Спасибо)