title: css animation with two steps and no transition
body: <p>I'm working on a <code>css</code> animation to switch the background color of an element.</p>
  
  <p>This animation is only two phases and no smooth transitions between both phases.</p>
  
  <p>It means, the first 50% of the animation, the background color will be <code>blue</code>, and the last 50% of the animation, the background color will be <code>grey</code>, without an transition in between.</p>
  
  <p>Here's the animation fully working:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div {
    width: 200px;
    height: 200px;
    animation: bg 4s linear infinite;
  }
  
  @keyframes bg {
    0% {
      background: blue;
    }
    50% {
      background: blue;
    }
    50.00001% {
      background: grey;
    }
    100% {
      background: grey;
    }
  } </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm wondering if there's a simpler way to do that. What I'm looking for is to use only <code>from</code> and <code>to</code> inside the <code>keyframes</code> without any additional step.</p>