Geek Answers Handbook

CSS3 single color step by step

I'm trying to do an animation on a button that changes colorand background-colorfrom white to black.

I do not want to disappear, and therefore found that I can use animation-timing-function: step.

However, when I use it, the animation does not reach black, it stops on gray.

.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>
Run codeHide result

Here is a demo .

Does anyone have an idea how to do this (no JS, of course)?

+4
source share
2 answers

This seems to be a kind of "gray" area (pun steps()intended ) relative to the time function for animations.

, steps(2, end), - + ( ), + ( ), , , . , , + .

, , , , steps(1, end) + , - + . , , , .

designmodo , , . , , , , steps(n, start), , steps(n, end), . 4- , , ( ).

:

.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>
Hide result
+3

:

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


animation-timing-function: step-end;

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;
  }
}
+1

More articles:


All Articles