CODEWITHSUNDEEP
javascripthtmlcssbackground
Michael
Michael

Reputation: 43

Make background color change frequently with CSS

I have a link with a background color of bright green and am trying to get the background to change to silver after an interval to produce a flashing effect. Is there a way to do this using CSS as I can not use javascript?

Upvotes: 1

Views: 113

Answers (1)

Richa
Richa

Reputation: 3289

You can do it using css like below.

Here is fiddle DEMO

<div class="blinkdiv">
</div>

CSS

@-webkit-keyframes blackWhite {  
  0% { background-color: red; }
  50% { background-color: red; }
  51% { background-color: black; }
  100% { background-color: black; }
}

@-webkit-keyframes blackWhiteFade {  
  0% { background-color: red; }
  50% { background-color: black; }
  100% { background-color: red; }
}

.blinkdiv {
    height: 100px;
    background-color: black;
  -webkit-animation-name: blackWhite;
  /* -webkit-animation-name: blackWhiteFade; */
  -webkit-animation-iteration-count: infinite;  
  -webkit-animation-duration: 2s; 
}

Hope this is what you were looking for.

Updated Fiddle as per your requirement

Upvotes: 1

Related Questions