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;
}

@CRover did you ever hear about animation? – Banzay Feb 18 '17 at 19:08 — Banzay, Feb 18 '17 at 19:08

Yousaf · Accepted Answer · 2017-02-18T19:40:26.747

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>

score 0 · Answer 2 · edited May 23 '17 at 11:46

0

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

edited May 23 '17 at 11:46

Community

1
1

answered Feb 18 '17 at 19:08

FrenchyNYC

337
1
6
23

score 0 · Answer 3 · answered Feb 18 '17 at 19:09

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.

i want it to keep switching between those colors #F98A01, #C61F83, #DE9914, #1EB6DC, #0060A1, how can i do that? — stephjhonny, Feb 18 '17 at 19:17
Sorry for the late response, just in case if you still want to know, or for other people with the same question, you will change the code from saying black or white to saying "background-color: #C61F83;" and also by changing/adding more percentages instead of 0%, 50%, and 100% to saying 0%, 20%, 40%, and adding 60%, 80%, 100% to fit your 5 color need (100% and 0% need the same color). — Cameron, Apr 07 '17 at 23:52

score 0 · Answer 4 · answered Feb 18 '17 at 19:15

  * {
  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>

Changing navbar color with css transition

4 Answers4