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;
}
background-color
#00A0D6
#00B1D7
#00A0D6
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.