title: Make CSS background animaton not fade but to snap between colours
body: <p>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</p>
  
  <pre><code>&lt;div class="boss"&gt;
      I am some text
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my CSS</p>
  
  <pre class="lang-css prettyprint-override"><code>.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;
      }
  }
  </code></pre>
  
  <p>A jsbin of the code above is here: <a href="https://jsbin.com/macimep/edit?html,css,output" rel="nofollow noreferrer">https://jsbin.com/macimep/edit?html,css,output</a></p>
  
  <p>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</p>