【JavaScript・CSS】テキスト＆リンクをフェードアウト＆フェードイン（点滅）しながら切り替える（カルーセル）

CSS JavaScript

タイトルのとおり、テキストと＆リンクをフェードアウト＆フェードイン（点滅）しながら切り替えるコードを自作してみました。
次のJavaScript 2行目「トピックスn」に表示したいテキスト、3行目「#」に設定したいURLを入力してください。
テキスト＆リンクを追加したい場合は、JavaSctipt 2・3行目の配列に「,」で区切って追加してください。
点滅の間隔を変えたい場合は、JavaScript 14行目の「3000」とCSS 2行目の「3s」を増減してください（この際に、両方の秒数を合わせないと、テキストの切り替わりと点滅のタイミングがずれてしまいますので注意してください。）。

<div id="topics">
  <a href="#" id="topics-link">トピックス１</a>
</div>
let cnt = 0;
const texts = ["トピックス１", "トピックス２", "トピックス３"];
const links = ["#", "#", "#"]
const text = document.getElementById('topics-link');

const setTopics = () => {
  cnt++;
  if (cnt > texts.length - 1) {
    cnt = 0;
  }
  text.textContent = texts[cnt];
  text.setAttribute('href', links[cnt]);
}
setInterval(setTopics, 3000)
#topics-link {
  animation: fade 3s infinite;
}

@keyframes fade {
  0% {
    opacity: 0;
  }

  25% {
    opacity: 1;
  }

  50% {
    opacity: 1;
  }

  75% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}