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
– Banzay

2017-02-18 19:08:58 +00:00
Commented Feb 18, 2017 at 19:08 — Banzay
– Banzay, Commented Feb 18, 2017 at 19:08

Yousaf · Accepted Answer · 2017-02-18 19:40:26Z

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>

edited Feb 18, 2017 at 19:40

answered Feb 18, 2017 at 19:12

Yousaf

29.6k6 gold badges54 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 11:46:44Z

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, 2017 at 11:46

CommunityBot

11 silver badge

answered Feb 18, 2017 at 19:08

FrenchyNYC

3371 gold badge6 silver badges23 bronze badges

Comments

Cameron · Accepted Answer · 2017-02-18 19:09:01Z

0

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.

answered Feb 18, 2017 at 19:09

Cameron

1,05712 silver badges24 bronze badges

2 Comments

stephjhonny Over a year ago

i want it to keep switching between those colors #F98A01, #C61F83, #DE9914, #1EB6DC, #0060A1, how can i do that?

Cameron Over a year ago

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).

Andrei Fedorov · Accepted Answer · 2017-02-18 19:15:28Z

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

Collectives™ on Stack Overflow

Changing navbar color with css transition

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related