Анимируйте заливку фона слева направо, используя анимацию ключевых кадров один за другим. - PullRequest
Новая
       65

Анимируйте заливку фона слева направо, используя анимацию ключевых кадров один за другим.

1 голос
/ 03 февраля 2020

Я хочу создать анимацию, такую ​​как прогрессбар, для которой я написал следующий код

Мой код 

.box {
  width: 26px;
  height: 10px;
  display: inline-block;
  background-size: 200% 100%;
  background-image: linear-gradient(to left, red 50%, black 50%);
  -webkit-animation: progressbar 1s ease infinite;
  -moz-animation: progressbar 1s ease infinite;
  -o-animation: progressbar 1s ease infinite;
  animation: progressbar 1s ease infinite;
}

@-webkit-keyframes progressbar {
  0% {
    opacity: 1;
    background-position: 0 0;
  }
  100% {
    opacity: 1;
    background-position: -100% 0;
  }
}
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

Моя проблема заключается в том, что все анимации работают одновременно. Я хочу добавить анимацию один за другим, заканчивая бесконечным l oop, как индикатор выполнения. Может анимация-функция времени: линейная, шаги (3, конец); поможет? Пожалуйста, помогите мне в этом. Спасибо

Ответы [ 2 ]

3 голосов
/ 03 февраля 2020

вы можете установить animation-delay, но для этого вам нужно будет удалить !important также, если есть N блоков, вы можете добавить стиль, используя JS или S CSS l oop. 

.box {
  width: 26px;
  height: 10px;
  display: inline-block;
  background-size: 200% 100%;
  background-image: linear-gradient(to left, red 50%, black 50%);
  -webkit-animation: progressbar 1s ease infinite;
  -moz-animation: progressbar 1s ease infinite;
  -o-animation: progressbar 1s ease infinite;
  animation: progressbar 1s ease infinite;
}

.box:nth-child(2) {
  animation-delay: 1s;
}

.box:nth-child(3) {
  animation-delay: 2s;
}

@-webkit-keyframes progressbar {
  0% {
    opacity: 1;
    background-position: 0 0;
  }
  100% {
    opacity: 1;
    background-position: -100% 0;
  }
}
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

Если вы хотите, чтобы каждый из них остановился перед перезапуском, вы можете сделать это: 

.box {
  width: 26px;
  height: 10px;
  display: inline-block;
  background-size: 200% 100%;
  background-image: linear-gradient(to left, red 50%, black 50%);
  -webkit-animation: progressbar 3s ease infinite;
  -moz-animation: progressbar 3s ease infinite;
  -o-animation: progressbar 3s ease infinite;
  animation: progressbar 3s ease infinite;
}

.box:nth-child(2) {
  animation-name: progressbar1;
}

.box:nth-child(3) {
  animation-name: progressbar2;
}

@-webkit-keyframes progressbar {
  0% {
    background-position: 0 0;
  }
  33%,
  100% {
    background-position: -100% 0;
  }
}

@-webkit-keyframes progressbar1 {
  0%,
  33% {
    background-position: 0 0;
  }
  66%,
  100% {
    background-position: -100% 0;
  }
}

@-webkit-keyframes progressbar2 {
  0%,
  66% {
    background-position: 0 0;
  }
  100% {
    background-position: -100% 0;
  }
}
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
1 голос
/ 03 февраля 2020

Если вы просто хотите визуальный эффект, вот идея с одним элементом и одной анимацией 

.box {
  width: 100px;
  height: 10px;
  background: 
    linear-gradient(#fff,#fff) 32% 0,
    linear-gradient(#fff,#fff) 68% 0,
    linear-gradient(red, red),
    black;
  background-repeat:no-repeat;
  background-size:5px 100%,5px 100%,0% 100%;
  animation: progressbar 1s ease infinite;
}

@keyframes progressbar {
  100% {
    background-size:5px 100%,5px 100%,100% 100%;
  }
}
<div class="box"></div>

Если вы хотите прозрачности, мы можем добавить маску: 

.box {
  width: 100px;
  height: 10px;
  background: 
    linear-gradient(red, red) no-repeat,
    black;
  background-size:0% 100%;
  -webkit-mask:
    linear-gradient(#fff,#fff) left,
    linear-gradient(#fff,#fff) center,
    linear-gradient(#fff,#fff) right;
  -webkit-mask-size:30% 100%;
  -webkit-mask-repeat:no-repeat;
  mask:
    linear-gradient(#fff,#fff) left,
    linear-gradient(#fff,#fff) center,
    linear-gradient(#fff,#fff) right;
  mask-size:30% 100%;
  mask-repeat:no-repeat;
  animation: progressbar 1s ease infinite;
}

@keyframes progressbar {
  100% {
    background-size:100% 100%;
  }
}
body {
 background:pink;
}
<div class="box"></div>
...