I've a nav bar like this:
<div id="navbar">
<ul>
<li id="link1"><a>Link1</a></li>
<li id="link2"><a>Link2</a></li>
<li id="link3"><a>Link3</a></li>
</ul>
</div>
I've created a an animation like this:
(CSS)
#link1 a
{
background-color:#089DE3;
-webkit-animation-name: example; /* Chrome, Safari, Opera */
-webkit-animation-duration: 8s; /* Chrome, Safari, Opera */
-webkit-animation-direction: alternate;
animation-name: example;
animation-duration: 8s;
animation-iteration-count: 1;
animation-direction: alternate;
}
than
#link2 a
{
border-right:1px solid #0068B3;
-webkit-animation-name: example; /* Chrome, Safari, Opera */
-webkit-animation-duration: 8s; /* Chrome, Safari, Opera */
-webkit-animation-direction: alternate;
-webkit-animation-delay: 8s;
animation-name: example;
animation-duration: 8s;
animation-iteration-count: 1;
animation-direction: alternate;
animation-delay: 7s;
}
etc...
With this animation, first highlight the button link 1, than link2, etc., but now i need a system to restart the cycle, when the animation reaches the last link (in this case, when the animation effect reaches the link3, i need that restart with the link1).