Css动画:用从左到右的颜色填充div

Question

我正在尝试创建一个动画背景填充效果(仍在学习动画(，但填充颜色在到达div末尾之前会快速跳跃。问题是什么？如何解决？提前谢谢。

.outer {
margin: 50px;
}
.button {
border: 1px solid black;
border-radius: 3px;
width: 100px;
height: 30px;
display: block;
background: linear-gradient(to right, black 50%, transparent 50%);
background-size: 200% 100%;
background-position: right bottom;
animation: makeItfadeIn 3s 1s;
animation-fill-mode:forwards;
}
@-webkit-keyframes makeItfadeIn {

100% {
background-position: left bottom;
background: linear-gradient(to right, black 100%, black 0%);
}
}

@keyframes makeItfadeIn {

100% {
background-position: left bottom;
background: linear-gradient(to right, black 100%, black 0%);
}
}

<div class="outer">
<div class="button">
</div> 
</div>

Answer 1

动画内部的背景是罪魁祸首。你只需要从右到左设置位置动画：

.outer {
margin: 50px;
}
.button {
border: 1px solid black;
border-radius: 3px;
width: 100px;
height: 30px;
display: block;
background: linear-gradient(to right, black 50%, transparent 0);
background-size: 200% 100%;
background-position: right;
animation: makeItfadeIn 3s 1s forwards;
}
@keyframes makeItfadeIn {
100% {
background-position: left;
}
}

<div class="outer">
<div class="button">
</div>
</div>

与获取更多细节相关：在线性梯度上使用背景位置的百分比值