JSFiddle - React, Tailwind, and code Playground

Color swipe text with high light on infinite animation. with CSS3

by Andrew Pougher

HTML

<i class="lead">CSS sliding color for highlighting option</i><br>
<nav>
  <ul>
    <li><a href="#" class="anim">Start Here</a></li>
    <li><a href="#">Title 1 </a></li>
    <li><a href="#">Title 2 </a></li>
    <li><a href="#">Title 3</a></li>
  </ul>
</nav>

CSS

@import url('https://fonts.googleapis.com/css?family=Raleway:400,800italic,900,900italic,800');
* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  font-family: 'Raleway', sans-serif;
  background:#ececec
}

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

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

a {
  font-size: 35px;
  font-weight:900;
  text-transform:uppercase;
  margin-left: 80px;
  color: #d7a150;
  text-decoration: none;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: -webkit-linear-gradient(left, #ffffff, #ffffff 50%, #d7a150 50%);
  background-image: linear-gradient(to right, #ffffff, #ffffff 50%, #d7a150 50%);
  background-size: 200% 100%;
  background-position: 100%;
}

.anim{  animation-name: colorswipeme;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    -webkit-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;}

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%;

}

@keyframes colorswipeme {
    0% {
        -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: 100%;
    }

    100% {
         -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%;
    }
}