Can animation and gradients work together?

Question

I put some gradients in an animation but it didn't work, why? (blah blah blah, to be able to post this question)

EDIT:

CSS

        @keyframes sample {
            0% {background: -moz-linear-gradient(#000,#fff)}
            100% {background: -moz-linear-gradient(#fff,#000)}
        }
        button {
            animation: sample 1s;
            -moz-animation: sample 1s;
        }

I'm certain my CSS isn't wrong at all. I'm gonna share it though. — , Mar 29 '16 at 20:10
Colors and color stops are not animatable. The position of a linear gradient is however. Basically, it's an image...whatever you can animate in an image you can animate in a gradient...but without knowing **exactly** what is is you are asking...we can't help. — Paulie_D, Mar 29 '16 at 20:13
Related - http://stackoverflow.com/questions/6542212/use-css3-transitions-with-gradient-backgrounds — Paulie_D, Mar 29 '16 at 20:15
Possible duplicate of [CSS3 animation with gradients](http://stackoverflow.com/questions/5654510/css3-animation-with-gradients) — Bram Vanroy, Mar 29 '16 at 20:16
@Paulie_D, I think that colors are animatable, it worked for me on Firefox 45. — , Mar 29 '16 at 21:23

score 2 · Accepted Answer · answered Mar 29 '16 at 20:32

Only answering because the duplicate examples seemed rubbish since they don't even offer a potential workaround, and I like helping people learn. So, for you to tinker...and even added a little pizazz for flavor...

CODEPEN

Keep in mind you're not animating your gradient, you're animating movement to give the illusion of animated gradients.

and some html/css...

@-webkit-keyframes vertigoBG {
  0%, 100% {
    background-position: 0 0; }
  50% {
    background-position: 100% 0; } }

@keyframes vertigoBG {
  0%, 100% {
    background-position: 0 0; }
  50% {
    background-position: 100% 0; } }

#magic {
  background: linear-gradient(to right, #fefefe, #ED1C24, #ED1C24, #f60, #f60, #ff0, #ff0, #0c4, #0c4, #09c, #09c, #00c, #00c, #909, #909, #ED1C24, #ED1C24, #fefefe);
  background-size: 1000% 100%;
  background-position: 0 0;
  -webkit-animation: vertigoBG 100s linear infinite;
  animation: vertigoBG 20s linear infinite;
  position: absolute;
  top: 0;
  width: 100%;
  height: 170px;
  -webkit-transform: skewY(-2deg);
  -ms-transform: skewY(5deg);
  transform: skewY(5deg);
  margin-top: -85px;
  z-index: -1;
}

<div id="magic"></div>

Enjoy!

I think it can solve my problem, thanks. I'd like an answer to my actual question though: "I put some gradients in an animation but it didn't work, why?" Is it a matter of support? — , Mar 29 '16 at 20:48
Right, you can't do it yet in pure html/css, if you throw javascript in the mix then you can. — Chris W., Mar 29 '16 at 20:57

Can animation and gradients work together?

1 Answers1