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;
