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 which still retains a smooth transition, since this is for an online RPG, which will be doing a lot of other transitions and databasing at the same time.

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 which still retains a smooth transition, since this is for an online RPG, which will be doing a lot of other transitions and databasing at the same time.

• javascript
• jquery
• css
• keyframe

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

More on CSS Keyframes here.