Css анимация: заполните div цветом слева направо - PullRequest
Новая
       22

Css анимация: заполните div цветом слева направо

0 голосов
/ 09 апреля 2020

Я пытаюсь создать анимированный эффект заливки фона (все еще изучаю анимацию), но цвет заливки быстро меняется до того, как он достигает конца 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>

1 Ответ

2 голосов
/ 09 апреля 2020

Фон внутри анимации является виновником. Вам просто нужно анимировать позицию справа налево: 

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

Для получения более подробной информации: Использование процентных значений с background-position для линейного градиента

...