Swiping text color transition on hover

by rajnishw3

HTML

<nav>
  <ul>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

CSS

/* REQUIRES FALLBACK FOR FIREFOX */
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html, body {
  height: 100%;
}

nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
}

nav ul {
  -ms-flex-item-align: center;
      align-self: center;
      list-style-type:none
}

a {
  font: 300 42px/1.5 "Helvetica Neue", sans-serif;
  color: #d7a150;
  text-decoration: none;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: -webkit-gradient(linear, left top, right top, from(#283271), color-stop(50%, #283271), color-stop(50%, #d7a150));
  background-image: linear-gradient(to right, #283271, #283271 50%, #d7a150 50%);
  background-size: 200% 100%;
  background-position: 100%;
}

a:hover {
  -webkit-transition: all 0.3s cubic-bezier(0, 0, 0.23, 1);
  transition: all 0.3s cubic-bezier(0, 0, 0.23, 1);
  background-position: 0%;
}