Animate background color like a progress bar in jQuery

Question

I have a div which has some text content( eg: My Name ) and the div is in RED background colour

Answer 1

you can use this code:

jsFiddle is here

HTML:

Button

    

    

        test Content
    

CSS:

#container{
    background:#eee;
    color:#555; 
    padding:10px; 
    overflow:hidden; 
    position:relative;
}
.content{
    z-index:9;
    position:relative;
}
.progress{
    z-index;1;
    width:0px;
    height:100%;
    position:absolute;
    background:tomato;
    left:0px;
    top:0px;
}
.filling{
animation: fill 10s linear;
-webkit-animation: fill 10s; /* Safari and Chrome */
animation-timing-function:linear;
-webkit-animation-timing-function:linear; /* Safari and Chrome */
}

@keyframes fill
{
0%   {background: red; width:0%;}
25%  {background: yellow; width:25%;}
50%  {background: blue; width:50%;}
75%  {background: green; width:75%;}
100% {background: lightgreen; width:100%;}
}

@-webkit-keyframes fill /* Safari and Chrome */
{
0%   {background: red; width:0%;}
25%  {background: yellow; width:25%;}
50%  {background: blue; width:50%;}
75%  {background: green; width:75%;}
100% {background: lightgreen; width:100%;}
}

JQuery:

$("button").click(function(){ 
      $('.progress').addClass("filling").css("background","lightgreen").width("100%");
});