script to fade bg color on page

[Karaethon]

In general if I know how to do something I want to do I can code it in a language I'm less than fluent in, if I am fluent in a language I can figure out how to code something I want to do but don't know very well how to do it, but this time I have almost no clue how to do what I want to do and very limited fluency in JS. 

I want a script that will slowly fade from one color (red, green, blue, white, black) to a neutral color (grey) and then fade into one of the randomly selected other 4 colors. Then repeat. Forever. So like Rd>gy>wt>bu>gy>bk etc.

I have no clue what to do, if you can help I will be grateful for all time.

 

Oh, and I need to make sure the text color is always contrasting so it can be read, so I need to adjust that too?

[Barand]

https://css-tricks.com/almanac/properties/a/animation/

[Karaethon]

57 minutes ago, Barand said:

https://css-tricks.com/almanac/properties/a/animation/

Oh. I can do it in css? Everything I need to do? I saw how it was alternating between two colors but can I randomly alternative between grey and one of the 5 colors? Great site, but now my headache got worse....

[Barand]

Multiple @keyframes?

[Barand]

Example

<style type='text/css'>
    body {
        width: 100%;
        height: 100%;
        background-color: #eee;
        animation: bgfade 15s infinite;
    }
    @keyframes bgfade {
        0%, 100% {
            background-color: red;
            color: white;
        }
        20% {
            background-color: gray;
            color: black;
        }
        40% {
            background-color: blue;
            color: white;
        }
        60% {
            background-color: white;
            color: black;
        }
        80% {
            background-color: green;
            color: white;
        }
    }
</style>

 

[Karaethon]

Thank you for your help. I ended up with this (which is a lot like what I just noticed you posted) I was able to drop the shifts to grey that I thought I would need for good color blending but didn't need after testing.

	    body {
  width: 100%;
  height: 100%;
  animation: pulse 60s infinite;
    overflow-y:auto;
}
	@keyframes pulse {
  0% {
    background-color: #ffffff;
  }
    10%{
        color: #ff0000;
    }
    20%{
        background-color: #0000ff;
    }
    30%{
        color: #00ff00;
    }
    40%{
        background-color: #000000;
    }
    50%{
        color: #ffffff;
    }
    60%{
        background-color: #ff0000;
    }
    70%{
        color: #0000ff;
    }
    80%{
        background-color: #00ff00;
    }
    90%{
        color: #000000;
    }
    100% {
    background-color: #ffffff;
  }
}
	

[Karaethon]

I really like this keyframes animation stuff, I even came up with, and coded, a heartbeat for my image on my page, is there a way to put in a delay between intervals so i can change the heart rate without having to adjust the percentages every time i adjust the cycle length?