CSS3逐步设置颜色 [英] CSS3 animate color by steps

问题描述

我正在尝试在按钮上制作动画，将颜色和背景颜色从白色更改为黑色。

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

我不希望出现任何褪色，因此我发现可以使用 animation-timing-function：step 。

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>

此处演示。

任何人都知道如何执行此操作（当然没有JS）？

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

推荐答案

相对于动画的 steps（）计时功能，这似乎是一个灰色区域（双关语意味）。

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

似乎发生的事情是，当您使用 steps（2，end）时，动画应该分两个步骤-一个是从黑色背景+白色到中间状态（两者均为灰色），然后是从中间状态到白色背景+黑色（结束状态），但是第二步恰好在动画的结尾并且几乎在同时元素将返回其原始状态以开始下一个循环。因此，给人一种白色背景+黑色永远不会发生的印象。

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.

似乎可行的解决方案是使用步骤（1，end），其开始和结束状态为黑色背景+白色，而中间阶段为白色背景+黑色。对于此方法的工作原理，我没有任何结论性的解释，但重点是它确实有效。

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.

在designmodo上的这篇文章是我找到的关于该主题的唯一文章，但是我仍然很难解释这种现象的原因。在看到此示例之后，我们可以确定的一件事是如果 steps（n，start）被使用，赛车永远不会到达起始位置，而如果我们使用 steps（n，end）永远不会到达终点。这是一个4步动画，但是只有3步可见，另一步恰好在开始或结束时发生（取决于参数）。

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).

解决方案：

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

这篇关于CSS3逐步设置颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！