Changing Background Color Using CSS Keyframae Animation

Keyframe Animation CSS
Keyframe Animation CSS
Keyframe Animation CSS

Css is the most Important part of Web Designing, Without css we can’t decorate out website or blog,

Today in this article i am going to tell you a very important element of css that’s name is Keyframe Animation, today we will learn how To Create Animted Backgrounds using Keyframe Animation.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
</body>
</html>

CSS

body
{
  animation: blink 20s linear infinite;
  -webkit-animation: blink 20s linear infinite;
}


@keyframes blink {
  0% {
    background: violet;
  }
  14.3% {
    background: indigo;
  }
  28.6% {
    background: blue;
  }
  42.9% {
    background: green;
  }
  57.2% {
    background: yellow;
  }
  71.5% {
    background: orange;
  }
  85.8% {
    background: red;
  }
  100% {
    background: violet;
  }
}

@-webkit-keyframes blink {
  0% {
    background: violet;
  }
  14.3% {
    background: indigo;
  }
  28.6% {
    background: blue;
  }
  42.9% {
    background: green;
  }
  57.2% {
    background: yellow;
  }
  71.5% {
    background: orange;
  }
  85.8% {
    background: red;
  }
  100% {
    background: violet;
 

Leave a Reply

Your email address will not be published. Required fields are marked *