Color Blinking – CSS Animation

This is a simple example of how to create CSS animations. You can use any CSS property inside the {} curly braces to get desired effects.

Demo

Open demo in a full window – https://demos.webdevpuneet.com/set1/css-color-blink/index.html

---

HTML

<div class="blink">

</div>

CSS Code

.blink{
  width:400px;
  height:400px;
  border:1px solid black;
  animation: blink 5s infinite;
}
@keyframes blink{
  0% {
    background: red;
  }
  20% {
    background: green;
  }
  40% {
    background: yellow;
  }
  60% {
    background: blue;
  }
  80% {
    background: orange;
  }
  100% {
    background: red;
  }
}

@-webkit-keyframes blink{
  0% {
    background: red;
  }
  20% {
    background: green;
  }
  40% {
    background: yellow;
  }
  60% {
    background: blue;
  }
  80% {
    background: orange;
  }
  100% {
    background: red;
  }
}