Animated changing color background

Hey Marie,

I’m not support, but I was browsing around and what you’re asking is fairly simple, but you will need some rudimentary CSS3 knowledge. The source for the All Blogger Tricks example gives you everything you need.

First thing you need to do is add a custom ID to your color section, for example, calling it “colorchange”. Don’t set a custom background color in order to keep any specificity conflicts out of play.

Next, you need some custom CSS:

#colorchange {
    -webkit-animation: colorBackground 20s infinite;
    animation: colorBackground 20s infinite;
}

@-webkit-keyframes colorBackground {
    0% { background-color: #fbcf61; }
    20% { background-color: #6bd57e; }
    40% { background-color: #ff6f6f; }
    60% { background-color: #57cff4; }
    80% { background-color: #0ed4c8; }
    100% { background-color: #fbcf61; }
}

@keyframes colorBackground {
    0% { background-color: #fbcf61; }
    20% { background-color: #6bd57e; }
    40% { background-color: #ff6f6f; }
    60% { background-color: #57cff4; }
    80% { background-color: #0ed4c8; }
    100% { background-color: #fbcf61; }
}

And that’s it. I think that should be all you need in terms of browser prefixes, too. I’m not sure what your level of knowledge is, but anything with “-webkit” in front of it should be the same as the unprefixed version. You can add keyframes by adding more in-between percentages (e.g. 0%, 10%, 20%, 30%, and so on), but this gives you five colors (first and last keyframes should be the same). You can change them by changing the background-color hex values. Keep in mind this won’t work in IE8 or IE9.

Gradients are currently not animatable with CSS, so you would need a JavaScript solution like the one you linked. In that one, it looks like you have to set the desired colors as RGB values in an array and target a specific div in jQuery, so you need to know how to do that and enqueue the JavaScript for it in WordPress. I don’t have time for that tutorial, but a freelancer could probably set you up in like 10-20 minutes to be honest.