Make CSS background animaton not fade but to snap between colours - css

Question

I am currently playing / learning CSS animations and transitions and I want to make a simple animation where the background colour and text of a DIV alternate between two colors. This is pretty simple but my colours fade or blend from one to another and I would rather they snap or jump or toggle from one to another so the impact of the change is stronger. Here is my simple code
<div class="boss">
I am some text
</div>
Here is my CSS
.boss {
font-family: Helvetica, sans-serif;
position: absolute;
width: 100vw;
height: 100vh;
top: 0px;
left: 0;
background-color: #e91e63;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 2em;
text-transform: uppercase;
animation: bg 1s linear infinite;
}
#keyframes bg {
0% {
background-color: #e91e63;
color: white;
}
100% {
background-color: white;
color: #e91e63;
}
}
A jsbin of the code above is here: https://jsbin.com/macimep/edit?html,css,output
Can anyone tell me how I can make the colour change so it toggles rather than fades. I'm sure this isn't a hard question but everything I have tried so far hasn't worked. Also I want to do this with CSS, toggling with JavaScript is simple but I am trying to get to grips with CSS. Many thanks in advance

Answer 1

If you don't need production ready code and just play with existing solutions, you can use animation-timing-function: steps(2, end); (see https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function#Step_examples).
You also can do :
#keyframes bg {
0%,49% {
background-color: #e91e63;
color: white;
}
50%,100% {
background-color: white;
color: #e91e63;
}
}

Answer 2

Try this:
.boss {
font-family: Helvetica, sans-serif;
position: absolute;
width: 100vw;
height: 100vh;
top: 0px;
left: 0;
background-color: #e91e63;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 2em;
text-transform: uppercase;
animation: bg 1s linear infinite;
}
#keyframes bg {
0%,
49.99% {
background-color: #e91e63;
color: white;
}
50%,
100% {
background-color: white;
color: #e91e63;
}
}
<div class="boss">
I am some text
</div>