我正在尝试在按钮上制作一个动画来改变color and background-color从白色到黑色。
我不想要任何褪色，所以我发现我可以使用animation-timing-function: step.
然而，当我使用它时，动画不会达到黑色，而是停止在灰色。
.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>
这里的demo https://jsfiddle.net/8tm8shm7/.
任何人都知道如何做到这一点（当然没有 IS）？
这似乎是一个“灰色”区域（双关语）steps()动画的计时功能。
似乎发生的事情是当你使用steps(2, end)，动画应该有两个步骤 - 一个是从黑色背景 + 白色到中间状态（两者都是灰色），然后另一个从中间状态到白色背景 + 黑色（最终状态），但第二步发生在动画结束时，几乎同时该元素将恢复到其原始状态以开始下一个循环。所以，这给人一种白色背景+黑色永远不会发生的印象。
似乎有效的解决方案是使用steps(1, end)开始和结束状态为黑底+白色，中途阶段为白底+黑色。我没有任何关于为什么它有效的结论性解释，但重点是它确实有效。
这篇文章来自designmodo http://designmodo.com/steps-css-animations/是我找到的关于这个主题的唯一一个，但我仍然发现很难解释这种行为的原因。看到之后我们可以确定的一件事这个例子 http://designmodo.com/demo/stepscss/car.html是如果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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
