Animate colour for items in a list - one list item at a time

[dylan-westbury]

Given a simple list:

li {
  display: inline-block;
  color: #000000;
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

I am trying to animate the colour of each item in the list (one by one) every 3 seconds (e.g. from black to red) and loop from start to finish.

I can get it to work by only showing 1 item and animating it at a time then hiding it for the next (as the transition applies to items[index] and not items). Wondering how I can make it work by showing the whole list and only animate the colour for one at a time?

const ColourListTransition = (items, delay) => {
  const [index, setIndex ] = useState(0);
  useEffect(() => {
    const interval = setInterval(() => {
      setIndex((state) => ( state + 1 ) % items.length);
    }, delay);

    return () => clearInterval(interval);
  }, []);

  return useTransition(items[index], {
    from: { color: '#000000' },
    enter: { color: "#FF0000" },
    leave: { color: "#000000" },
    loop: true,
    config: config.molasses
  })
}

{ ColourListTransition(['item 1', 'item 2', 'item 3', 'item 4'], 3000)(({ color }, item) => (
  <animated.li
    key={ item }
    style={ { color, display: 'inline-block', listStyleType: 'none' } }
  >
    { item }
  </animated.li>
)) }

I've searched the whole web, and haven't managed to find something similar :)