CSS3 умеет
так делать
Для вашего случая примерно так
#mydiv {
-webkit-animation: myAnimate 5s; /* Chrome, Safari, Opera */
animation: myAnimate 5s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes myAnimate {
from {
background: -webkit-linear-gradient(180deg, red, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(180deg, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(180deg, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(180deg, red, blue); /* Standard syntax */
}
to {
background: -webkit-linear-gradient(0deg, blue, red); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(0deg, blue, red); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(0deg, blue, red); /* For Firefox 3.6 to 15 */
background: linear-gradient(0deg, blue, red); /* Standard syntax */
}
}
/* Standard syntax */
@keyframes myAnimate {
from {
background: -webkit-linear-gradient(180deg, red, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(180deg, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(180deg, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(180deg, red, blue); /* Standard syntax */
}
to {
background: -webkit-linear-gradient(0deg, blue, red); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(0deg, blue, red); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(0deg, blue, red); /* For Firefox 3.6 to 15 */
background: linear-gradient(0deg, blue, red); /* Standard syntax */
}
}
Вернее вместо #mydiv задать свой класс, например, myAnimationGradient. и в необходимый момент производить $myTargetElement.toggleClass('myAnimationGradient')