Peter David Carter-Poulsen Peter David Carter-Poulsen - 2 years ago 98
jQuery Question

Loop colour transition with CSS

I would like to be able to loop a colour transition for the background colour of my website, so it slowly shifts between two subtly different hues as the users browse, to give variation to their browsing experience. I'm wanting something like the following:

.background {
background-color: #00A0D6;
transition: background-color: 100s;

But with
cycling back to
, then beginning the transition back to
as soon as it has reached
. I would also like this to happen automatically, from the moment a user browses to the site.

If possible I would like to do this in vanilla CSS. If not, is there a way to use a Javascript loop to cycle the value in this way? Possibly with the jQuery library? I would like the most processor-efficient method possible, since this is for an online RPG, which will be doing a lot of other transitions and databasing at the same time.

Answer Source

You can use CSS @keyframes to achieve what you want:

@keyframes changeColor {
    from {
        background-color: #00A0D6;
    to {
        background-color: #00B1D7;

Then you use it with the animation property in the desired elements:

html, body {
    animation: changeColor 100s infinite;

More on CSS Keyframes here.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download