JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" class="Terms-Service">Terms of Service</a>&nbsp;&nbsp;|&nbsp;&nbsp;
<a href="#">Privacy Policy</a>&nbsp;&nbsp;|&nbsp;&nbsp;
<a href="#">Use Policy</a>&nbsp;&nbsp;|&nbsp;&nbsp;
<a href="#">Anti-Spam Laws</a>

CSS

a {
  color: red;
  -webkit-animation: go-reverse 1s 1;
  animation: go-reverse 1s 1;
}
a:hover{
    /* -webkit-animation-duration: 2s;
    -webkit-animation-name: go-black;
    -webkit-animation-iteration-count: 1;
    
    animation-duration: 2s;
    animation-name: go-black;
    animation-iteration-count: 1; */
    
    -webkit-animation: go-black 2s 1;
    animation: go-black 2s 1;
}
@-webkit-keyframes go-reverse {
    from {color: green;}
    to {color: red;}
}
@keyframes go-reverse {
    from {color: green;}
    to {color: red;}
}
@-webkit-keyframes go-black {
    from {color: red;}
    to {color: green;}
}
@keyframes go-black {
    from {color: red;}
    to {color: green;}
}