Изменить цвет границы за каждые n секунд

Question

Я хочу изменить цвет моей границы, чтобы цвет менялся каждую секунду на другой цвет. Я не знаю, как это сделать, любая помощь? Это мой код.

/* Style the links inside the list items */ 
 
ul.topnav li a { 
 
    display: inline-block; 
 
    border-left: 3px solid; 
 
    border-left-color: #FF0000; 
 
    border-top-color: #F5FF00; 
 
    border-top-style: double; 
 
    border-bottom: 3px solid; 
 
    border-bottom-color: #FF0000; 
 
    border-right-style: double; 
 
    border-right-color: #F5FF00; 
 
    border-radius: 40px; 
 
    color: #f2f2f2; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    transition: 0.3s; 
 
    font-size: 17px; 
 
}

<header> 
 
    <ul class="topnav" id="drop"> 
 
    <li><a class="selected" href="home.html">Home</a></li> 
 
    <li> 
 
     <a href="project.html">Project</a> 
 
     <ul> 
 
     <li><a href="project.html">Algemeen</a></li> 
 
     <li><a href="test.html">test</a></li> 
 
     <li><a href="test2.html">test2</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="contact.html">Contact</a></li> 
 
    <li class="icon"> 
 
     <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a> 
 
    </li> 
 
    </ul> 
 
</header>

Answer 1

Если вы знаете последовательность цветов или просто вы не заботитесь, вы можете использовать правило CSS под названием @Keyframes animation, он совместим с большинством современных browsers и вы можете делать много сложных вещей, как это:

.border-glow { 
 
    border: 1px solid blue; 
 
    animation: 4s infinite glow; 
 
} 
 
@keyframes glow { 
 
    0% { 
 
    border-color: red; 
 
    } 
 
    25% { 
 
    border-color: blue; 
 
    } 
 
    75% { 
 
    border-color: yellow; 
 
    } 
 
    100% { 
 
    border-color: purple; 
 
    } 
 
} 
 
@-webkit-keyframes glow { 
 
    0% { 
 
    border-color: red; 
 
    } 
 
    25% { 
 
    border-color: blue; 
 
    } 
 
    75% { 
 
    border-color: yellow; 
 
    } 
 
    100% { 
 
    border-color: purple; 
 
    } 
 
}

<div class="border-glow">Shiny!</div>

Working jdfiddle demo.