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