Многоцветная текстовая анимация, но только при наведении

.text {
  font-size: 24px;
  font-weight: bold;
}
.text:hover {
  animation: animateColors 1s infinite;
}
@keyframes animateColors {
  0% { color: red; }
  50% { color: green; }
  100% { color: blue; }
}

<div class = "text">Dummy Text</div>

.nav>li>a {
  color: black;
  text-decoration: none;
}

.nav>li>a:hover {
  animation: color-shift 1s alternate infinite;
}

@keyframes color-shift {
  0% {
    color: blue;
  }
  33% {
    color: green;
  }
  66% {
    color: yellow;
  }
  100% {
    color: red;
  }
}

<ul class = "nav navbar-nav">
  <li><a id = "nav" href = "#">Home</a></li>
  <li><a id = "nav1" href = "#">About</a></li>
  <li><a id = "nav2" href = "#">Gallery</a></li>
  <li><a id = "nav3" href = "#">Contact</a></li>
</ul>

const colors = ["blue", "green", "yellow", "red"];
let interval;

document.querySelectorAll(".nav > li > a").forEach(item => {
  item.addEventListener("mouseover", rainbow, false);
  item.addEventListener("mouseout", stop, false);
});

function rainbow() {
  this.style.color = colors[Math.floor(Math.random() * colors.length)];
  interval = setTimeout(() => rainbow.call(this), 250);
}

function stop() {
  clearInterval(interval);
  this.style.color = "black";
}

.nav>li>a {
  color: black;
  text-decoration: none;
}

<ul class = "nav navbar-nav">
  <li><a id = "nav" href = "#">Home</a></li>
  <li><a id = "nav1" href = "#">About</a></li>
  <li><a id = "nav2" href = "#">Gallery</a></li>
  <li><a id = "nav3" href = "#">Contact</a></li>
</ul>

var repeater;
var repeater1;
var repeater2;
var repeater3;

var color_text = document.getElementById('nav');
var color_text1 = document.getElementById('nav1');
var color_text2 = document.getElementById('nav2');
var color_text3 = document.getElementById('nav3');

var color = new Array(4);

color[0] = "blue";
color[1] = "green";
color[2] = "yellow";
color[3] = "red";

function displaycolor() {
  x = Math.floor(Math.random() * color.length)
  color_text.style.color = color[x];
}

function displaycolor1() {
  x = Math.floor(Math.random() * color.length)
  color_text1.style.color = color[x];
}

function displaycolor2() {
  x = Math.floor(Math.random() * color.length)
  color_text2.style.color = color[x];
}

function displaycolor3() {
  x = Math.floor(Math.random() * color.length)
  color_text3.style.color = color[x];
}

<div class = "collapse navbar-collapse" id = "myNavbar">
  <ul class = "nav navbar-nav">
    <li><a id = "nav" onmouseover = "repeater=setInterval(displaycolor,100);" onmouseout = "color_text.style.color='gray';clearInterval(repeater);" href = "index.html">Home</a></li>
    <li><a id = "nav1" onmouseover = "repeater1=setInterval(displaycolor1,100);" onmouseout = "color_text1.style.color='gray';clearInterval(repeater1);" href = "about.html">About</a></li>
    <li><a id = "nav2" onmouseover = "repeater2=setInterval(displaycolor2,100);" onmouseout = "color_text2.style.color='gray';clearInterval(repeater2);" href = "port/gallery.html">Gallery</a></li>
    <li><a id = "nav3" onmouseover = "repeater3=setInterval(displaycolor3,100);" onmouseout = "color_text3.style.color='gray';clearInterval(repeater3);" href = "#">Contact</a></li>
  </ul>