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>

获取更多详细信息相关：Using percentage values with background-position on a linear-gradient

Css动画：从左到右用一种颜色填充div

Css animation: fill a div with a color from left to right

css

linear-gradients

css-animations