Только одна панель CSS анимации в любой момент времени - PullRequest
Новая
       60

Только одна панель CSS анимации в любой момент времени

1 голос
/ 06 мая 2019

Я использую CSS-анимацию, чтобы показать неопределенный индикатор выполнения. Смотрите код ниже. Если вы заметите, что в любой момент времени есть 2 движущихся градиента, то есть когда 1-й достигает 50% ширины, 2-й начинается. Я знаю, что я определил CSS таким образом, используя webkit-background-size (50% и 100%). Однако то, что я не могу сделать, это убедиться, что в любой момент времени должна быть только 1 движущаяся часть, то есть, как только анимация достигает правого конца div, она должна начинаться с левого конца. Есть какие-нибудь указатели на это?

См. https://jsfiddle.net/AnuragSinha/nuokygpe/1/ и соответствующий код ниже. 

    @-webkit-keyframes moving-gradient {
    0% { background-position: left bottom; }
    100% { background-position: right bottom; }
    }
    
    .loading-gradient {
    width: 200px;
    height: 30px;
    background: -webkit-linear-gradient(
            left,
            #e9e9e9  50%,
            #eeefef 100%
        ) repeat;
    -webkit-background-size: 50% 100%;
    -webkit-animation-name: moving-gradient;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    }
<div class="loading-gradient" style="width: 200px; height: 30px"> </div>

1 Ответ

0 голосов
/ 06 мая 2019

Вместо создания градиента 50% сделайте его 200% и определите 2 градиента окраски внутри него.При этом каждая часть градиента будет покрывать ровно 100% ширины элемента, после чего вы можете анимировать его слева направо. 

.loading-gradient {
  width: 200px;
  height: 30px;
  background: linear-gradient(to left, 
    #e9e9e9 0%  25%, #eeefef 50%,   /* first one take the half*/
    #e9e9e9 50% 75%, #eeefef 100%); /* second one take the other half*/
  background-size: 200% 100%;
  animation: moving-gradient 1s linear infinite;
}

@keyframes moving-gradient {
  0% {
    background-position: right;
  }
 /*100% {
    background-position: left; /* No need to define this since it's the default value*/
  }*/
}
<div class="loading-gradient" style="width: 200px; height: 30px"> </div>

Поскольку градиент теперь имеет размер больше контейнера, вам необходимо выполнить противоположную анимацию (справа налево).

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

Вот еще одна идея, где вы можете рассмотреть псевдоэлемент и перевести анимацию: 

.loading-gradient {
  width: 200px;
  height: 30px;
  position:relative;
  z-index:0;
  overflow:hidden;
}
.loading-gradient:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  right:0;
  width:200%;
  bottom:0;
  background: linear-gradient(to left, #e9e9e9 50%, #eeefef 100%);
  background-size: 50% 100%;
  animation: moving-gradient 1s linear infinite;
}

@keyframes moving-gradient {
  100% {
    transform: translate(50%);
  }
}
<div class="loading-gradient" style="width: 200px; height: 30px"> </div>
...