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

Question

I'm trying to create an animated background fill effect (still learning animation) but the fill color jumps quickly before it reaches the end of the div. What's the issue and how to fix it? Thanks in advance.

.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

Background inside the animation is the culprit. You simply need to animate the position from right to left:

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

Related to get more details: Using percentage values with background-position on a linear-gradient