CSS3 animate color by steps

Question

I am trying to make an animation on a button which change the color and background-color from white to black.

I don't want any fade and so I found that I can use animation-timing-function: step.

However when I use it the animation doesn't reach black, it stops at grey.

.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;
  }
}

<button class="animated-play-btn">
  coucou
</button>

Here the demo.

Any one have an idea how to do this (no JS of course)?

Answer 1

This seems to be sort of a "grey" area (pun intended) with respect to the steps() timing function for animations.

What seems to happen is that when you use steps(2, end), the animation is supposed to have two steps - one is from black background + white color to an intermediate state (where both are gray) and then another from the intermediate state to white background + black color (the end state) but the 2nd step happens right at the end of the animation and at almost the same time that the element is going to its original state to start the next loop. So, it kind of creates an impression that the white background + black color never happens.

The solution that seems to be working is to use steps(1, end) with the start and end states as black background + white color while the half way stage is white background + black color. I don't have any conclusive explanation on why this works but the point is that it does work.

This article at designmodo is the only one that I've found about this topic but I am still finding it difficult to explain the reason for this behavior. The one thing which we can be certain about after seeing this example is that if steps(n, start) is used, the car never comes to start position whereas if we use steps(n, end) it never reaches the end point. It is a 4 step animation but only three steps are visible, the other step happens right at the start or the end (depending on the parameter).

Solution:

.animated-play-btn {
  background-color: white;
  height: 50px;
  width: 200px;
  animation-timing-function: steps(1, end);
  animation-duration: 1s;
  animation-name: clipping_btn;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}
@keyframes clipping_btn {
  0%, 100% {
    background-color: #000;
    color: white;
  }
  50% {
    color: black;
    background-color: #fff;
  }
}

<button class="animated-play-btn">
  coucou
</button>

Answer 2

The solution is to add on step and change:

animation-timing-function: steps(2, end);

by

animation-timing-function: step-end;

Here the new css:

.animated-play-btn {
  background-color: white;
  height: 50px;
  width: 200px;
  animation-timing-function: steps(1, end);
  animation-duration: 1s;
  animation-name: clipping_btn;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}
@keyframes clipping_btn {
  from {
    background-color: #000;
    color: #fff;
  }

  50%{
    color: #000;
    background-color: #fff;

  }
  to {
    background-color: #000;
    color: #fff;
  }
}