Changing navbar color with css transition

Question

Is there a transition that changes navigation bar color every 30 seconds? Here is what I have tried so far:

.navbar {
    background-color: #080;
    -webkit-transition: background 1s;
    -moz-transition: background 1s;
    -o-transition: background 1s;
    transition: background 1s;
}

Answer 1

Using CSS3 Animation, you can do it.

Example code given below changes colour approximately after 30 seconds and switches between different colours.

 #navbar { background-color: #080; width: 100%; height: 100px; animation: changeColour 190s linear 2s infinite alternate; } @keyframes changeColour { 0%, 15% { background-color: #080; } 16%, 30% { background-color: #F98A01; } 31%, 45% { background-color: #C61F83; } 46%, 60% { background-color: #DE9914; } 61%, 75% { background-color: #1EB6DC; } 76%, 90% { background-color: #0060A1; } 91%, 100% { background-color: #080; } } 

 <div id="navbar"></div> 

Answer 2

Use a timeout like that :

$(elem).css('z-index','0');
setTimeout(function(){ $(elem).css('z-index','2'); },2000)

Source : jQuery change CSS after a certain amount of time

Answer 3

That is called an animation. Try this:

.navbar {
    -webkit-animation-name: changeColorAnim;
    animation-name: changeColorAnim;
    -webkit-animation-duration: 90s;
    animation-duration: 90s;
    animation-iteration-count: infinite;
}

@-webkit-keyframes changeColorAnim {
    0% { background-color: black }
    50% { background-color: white }
    100% { background-color: black }
}

@keyframes changeColorAnim {
    0% { background-color: black }
    50% { background-color: white }
    100% { background-color: black }
}

If you want it to not change gradually then put inside of the @keyframes something like this:

49% { background-color: black }

And change it to the color at 0% and also you can put that for 99% and keep 99% at the same color as 50%. This keeps it the same color until 1% before and then it will change during that 1% instead of that 50% range.

Answer 4

  * { padding: 0; margin: 0; } div { position: fixed; width: 100vw; height: 20vh; animation: changecolor 300s infinite ease-in-out; } @keyframes changecolor { 0%, 9% { background-color: black; } 10%, 19% { background-color: blue; } 20%, 29% { background-color: red; } 30%, 39% { background-color: green; } 40%, 49% { background-color: cyan; } 50%, 59% { background-color: magenta; } 60%, 69% { background-color: yellow; } 70%, 79% { background-color: lightblue; } 80%, 89% { background-color: pink; } 90%, 99% { background-color: lightgreen; } 100% { background-color: black; } 

 <div class="navbar"></div>