Animation How to - Animate color for Navigation bottom-border

Question

We would like to know how to animate color for Navigation bottom-border.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
a {<!-- w w w  .  j  av a2  s  .c  om-->
  text-decoration: none;
}

ul {
  list-style: none;
}
.navigation {
  font-size: 20px;
  margin-top: 20px;
}

.navigation li {
  float: left;
  margin-left: 25px;
}

.navigation li a {
  border-bottom: 2px solid green;
}
.navigation li a {
  -webkit-animation: rawr 5s infinite;
}

@-webkit-keyframes rawr { 
   0% {border-bottom: 2px solid red; }
   40%{border-bottom:2px solid red;}
   50%{border-bottom:2px solid blue;}
   90%{border-bottom:2px solid blue;}
   100%{border-bottom:2px solid red;}
}
</style>
</head>
<body>
  <ul class="navigation">
    <li><a href="">Portfolio</a></li>
    <li><a href="">java2s.com</a></li>
    <li><a href="">Contact</a></li>
  </ul>
</body>
</html>

The code above is rendered as follows: