Animation with background gradient color

[cang_nduc]

hi all, i just wonder if the gradient color can be animated? as the code below it does not work.

#test {

width:50px;

height:50px;

-moz-animation:test 3s alternate infinite;

}

@-moz-keyframes test {

0%{

background:-moz-linear-gradient(270deg,#0F0,#F00);

}

100%{

background:-moz-linear-gradient(270deg,#F00,#0F0);

}

}

[joshuanhibbert]

As @Paulie_D said, not just yet. That doesn’t mean that you can’t be sneaky and find another way to do it though! Using background-position for instance, example here: http://jsfiddle.net/sl1dr/TUGwu/

[Mottie]

@joshuanhibbert Nice! *sigh* I guess I need to sit down and finally learn how to use css3 animation LOL.

[joshuanhibbert]

@Mottie Thanks! Now that webkit has simplified syntax it’s not so bad.

[joshuanhibbert]

@cang_nduc Feel free to let us know how you went…

[petervin]

Nikce,thanks for share

[Umair]

Thanks for sharing. But I have a little request to webmaster please add the frame or output box where we check the code examples online.

[Mottie]

@Umair You can demo your code on jsFiddle.net and add a link to a post

[Author]

Posts