<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
@-webkit-keyframes Border {
    0% {border-color: crimson;}
    20% {border-color: orange;}
    40% {border-color: goldenrod;}
    60% {border-color: green;}
    80% {border-color: DarkBlue;}
    100% {border-color: purple}
}

@-webkit-keyframes Background {
    0% {background-color: crimson;}
    20% {background-color: orange;}
    40% {background-color: goldenrod;}
    60% {background-color: green;}
    80% {background-color: DarkBlue;}
    100% {background-color: purple}
}

@-webkit-keyframes Font {
    0% {color: crimson;}
    20% {color: orange;}
    40% {color: goldenrod;}
    60% {color: green;}
    80% {color: DarkBlue;}
    100% {color: purple}
}

li:nth-child(1){
  -webkit-animation:Font 5s infinite alternate;
}

li:nth-child(2){
  border: 3px solid;
  border-radius: 200px;
  -webkit-animation:Border 5s infinite alternate;
}

li:nth-child(3){
  border-radius: 200px;
  color:#fff;
  -webkit-animation:Background 5s infinite alternate;
}

/*Basic Setup*/
li{
  list-style: none;
  float: left;
  font-size: 20px;
  font-weight: 700;
  padding: 10px 20px;
  margin: 0 15px;
}

li:first-child{
  margin-left:0;
  padding-left:0;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.