Color changing effect using css | Sanwebcorner

Color changing effect using css

Color changing effect is one of the attractive concept. This will be done by using css3, Change the colors according to your choice with seconds i given in this example 5sec interval between the two colors. This is also called as a blinker, Here is i used the code is animation: change color 5s infinite;


I hope this simple concept will help you, Here I provide the live demo and source code change the code and see the animation with different colors.
.


color changing effect.php

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>color changing effect using css</title>
<style>
.blinker{
font-family: muli,arial,sans-serif;
font-size: 20px;
font-weight: bold;
color:#333;
animation: changecolor 5s infinite;
-moz-animation: changecolor 5s infinite;
-webkit-animation: changecolor 5s infinite;
-ms-animation: changecolor 5s infinite;
-o-animation: changecolor 5s infinite;
}

@keyframes changecolor
{
0%   {color: red;}
25%  {color: yellow;}
50%  {color: blue;}
100% {color: green;}
}
/* Mozilla Browser */
@-moz-keyframes changecolor
{
0%   {color: red;}
25%  {color: yellow;}
50%  {color: blue;}
100% {color: green;}
}
/* WebKit browser Safari and Chrome */
@-webkit-keyframes changecolor
{
0%   {color: red;}
25%  {color: yellow;}
50%  {color: blue;}
100% {color: green;}
}
/* IE 9,10*/
@-ms-keyframes changecolor
{
0%   {color: red;}
25%  {color: yellow;}
50%  {color: blue;}
100% {color: green;}
}
/* Opera Browser*/
@-o-keyframes changecolor
{
0%   {color: red;}
25%  {color: yellow;}
50%  {color: blue;}
100% {color: green;}
}
</style>
</head>
<body>
<div class="blinker"><a href="http://www.sanwebcorner.com/">www.sanwebcorner.com</a></div>
</body>
</html>