title: CSS3 animate color by steps
body: <p>I am trying to make an animation on a button which change the <code>color</code> and <code>background-color</code> from white to black.</p>
  
  <p>I don't want any fade and so I found that I can use <code>animation-timing-function: step</code>.</p>
  
  <p>However when I use it the animation doesn't reach black, it stops at grey.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.animated-play-btn {
    background-color: white;
    height: 50px;
    width: 200px;
    animation-timing-function: steps(2, end);
    animation-duration: 1s;
    animation-name: clipping_btn;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
  }
  @keyframes clipping_btn {
    from {
      background-color: #000;
      color: white;
    }
    to {
      color: black;
      background-color: #fff;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button class="animated-play-btn"&gt;
    coucou
  &lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here the <a href="https://jsfiddle.net/8tm8shm7/" rel="nofollow">demo</a>. </p>
  
  <p>Any one have an idea how to do this (no JS of course)?</p>