text color animaion on hover

//Hover text color animation
//HTML markup
    <div class="text-center">
      <ul>
        <li><a href="#">Item one </a></li>
        <li><a href="#">Item Two</a></li>
        <li><a href="#">Item Three</a></li>
        <li><a href="#">Item Four</a></li>
      </ul>
    </div>
//CSS
div.text-center ul li a {
  font: 300 42px/1.5 "Helvetica Neue", sans-serif;
  margin-left: 80px;
  color: #d7a150;
  text-decoration: none;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(to right, #283271, #283271 50%, #d7a150 50%);
  background-size: 200% 100%;
  background-position: 100%;
}
div.text-center ul li a:hover {
  transition: all 0.3s cubic-bezier(0, 0, 0.23, 1);
  background-position: 0%;
}