在html中如何添加线性渐变,css3线性渐变在js里怎么写

html>

Test

body{

padding: 20px;

background-color:#FFF;

}

.colorchange

{

animation:myfirst 5s;

-moz-animation:myfirst 5s; /* Firefox */

-webkit-animation:myfirst 5s; /* Safari and Chrome */

-o-animation:myfirst 5s; /* Opera */

}

@keyframes myfirst

{

from {background:red;}

to {background:yellow;}

}

@-moz-keyframes myfirst /* Firefox */

{

from {background:red;}

to {background:yellow;}

}

@-webkit-keyframes myfirst /* Safari and Chrome */

{

from {background:red;}

to {background:yellow;}

}

@-o-keyframes myfirst /* Opera */

{

from {background:red;}

to {background:yellow;}

}

#main{

width:100px;

height:100px;

background:red;

}

#cgbt{

width: 100px;

margin: 20px 0 0 0;

text-align: center;

cursor: pointer;

}

#cgbt:hover{

background-color: #2D93CA;

}

我会变么？

点我让上面的变颜色

$(document).ready(function(){

$("#cgbt").click(function(){

$("#main").attr("class","colorchange");

});

});