Peter David Carter-Poulsen Peter David Carter-Poulsen - 6 months ago 33
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
background-color
cycling back to
#00A0D6
, then beginning the transition back to
#00B1D7
as soon as it has reached
#00A0D6
. 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

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.