Styling animated rainbow links

This new website layout is quite minimalist and mostly plays on typography styles and hierarchy. I wanted to add some spice to such a simple base — so what better way than doing it rainbow-style on hyperlinks?^[1]

The general idea is that my hyperlinks are underlined by default^[2] as they are the same color as the body text. When hovered of focused, they are animated with CSS keyframes that seamlessly transition through a list of colors. To differentiate the focus from hover state, I removed the underline and added an outline around the link instead^[3].

As you noticed, I am not a very talented web dev blogger, so I'll just drop my CSS below.

a {
  color: white;
  text-underline-position: under;
}

a:hover {
  animation: color-change 5s infinite;
}

a:focus {
  animation: color-change 5s infinite;
  text-decoration: none;
  outline-offset: 0.1em;
  outline: 0.1em solid;
}

@keyframes color-change {
  5% {
    color: hsl(0, 100%, 30%);
  }
  15% {
    color: hsl(41, 100%, 33%);
  }
  30% {
    color: hsl(140, 100%, 27%);
  }
  50% {
    color: hsl(230, 100%, 50%);
  }
  70% {
    color: hsl(261, 100%, 55%);
  }
  90% {
    color: hsl(320, 100%, 31%);
  }
}

⊙