Loop colour transition with CSS

Question

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 1

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;
}

Loop colour transition with CSS

Sign up