Problem with animated gradient

Hi gbcode,

I put your code into an HTML file and viewed it in the latest versions of Chrome, Firefox, Safari and Internet Explorer on Mac and Windows, respectively. But I was unable to recreate the issue you are describing.

Just as a guess... since you're using -moz and -webkit vendor prefixes on the @keyframes block, have you tried also including a vendor prefixes for the gradient? Also try re-ordering the property values in the animation rules. I'm not sure if this will be an immediate solution to your problem but it's important to rule out as much as possible if you're getting weird or totally unexpected results with such a short amount of code.

body {
    /* this is how Bootstrap 3x handles vendor prefixed gradients (except for IE, lol) */
    background-image: -webkit-linear-gradient(top,       #2389c3, #29a8ce, #29cec8, #23ce84);
    background-image:      -o-linear-gradient(top,       #2389c3, #29a8ce, #29cec8, #23ce84);
    background-image:         linear-gradient(to bottom, #2389c3, #29a8ce, #29cec8, #23ce84);
    background-repeat: none; /* or whatever repeat value works for what you're doing */

    -webkit-animation: 22s ease infinite gradient-bg;
       -moz-animation: 22s ease infinite gradient-bg;
            animation: 22s ease infinite gradient-bg;
}

Now I can see the issue you are describing and I understand it a little better now.

Try this... but read the followup below the code.

html {
    height: 100%;
}

body {
    min-height: 100%;
}

Basically, the container the gradient is applied to (the body) doesn't have a defined height to work with the percentages in the background position. If I apply the styles above, it looks to me like its doing what you are expecting it to do.

However, I've enountered problems in my own work when I use the code above, so I try to avoid leaning on it as a solution.

If this solution works for you and it DOES turn out to cause you more issues down the road, then don't feel bad about using another <div> just to position the background to the viewport underneath all of the content, that way you don't have to wrap your entire DOM with a html { height: 100% } rule that can potentially code you into a corner.

Thanks for the reply!

Didn't you get a green/blue box appearing from the bottom at all after half of the animation? Tried in multiple browsers and computers with the same effect.. I also tried re-ordring the animation properties but no luck there. Even weirder is that if I add the -webkit-linear-gradient the animation doesn't work at all?

I'll link my workspace preview here: https://port-80-331ybypf9w.treehouse-app.com

Ah, it does! Although I see why you'd rather recommend using a <div> for the background, the animation is a bit weird compared to without the additional properties. But adding a background <div> with 100% width and height could possibly fix this?

Thank you!

Great, thank you so much for the assistance! I'll report back tomorrow!

Yep, works perfectly! I noticed that it stays on the blue gradient a lot longer than the green... But it's probably fixable with some other colors or animation adjustments(I hope). Thank you so much for helping me out, would've probably given up otherwise, really appreciated!