Rainbow cycle

HTML

<div class="gif">GIF</div>

CSS

.gif {
      background-color: #1a1a1b;
      border: 5px solid #9400d3;
      height: 105px;
      width: 130px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      border-radius: 51px;
      font-size: 1.6em;
      font-weight: 700;
      transition: all 1000ms;
    }

JavaScript

const scheme = document.querySelector("div");
      const rainbow = [
        "#9400D3",
        "#4B0082",
        "#0000FF",
        "#00FF00",
        "#FFFF00",
        "#FF7F00",
        "#FF0000",
      ];

      setInterval(() => {
        for (let colors = 0; colors < rainbow.length; colors++) {
          scheme.style.color = `${rainbow[colors]}`;
          scheme.style.borderColor = `${rainbow[colors]}`;
          console.log(rainbow[colors]);
        }
      }, 1000);