Линейно анимируемое свойство фона сверху вниз слева направо

Question

Я работаю над созданием заполнителя контента Facebook с эффектом мерцания.Я просто хочу анимировать свойство фона (или применяя линейный градиент от верхнего левого к нижнему правому углу) от левого верхнего и заканчивая правому нижнему.

.Box {
  height: 100px;
  width: 100px;
  margin: 16px;
  background: #f6f7f8;
  border-radius: 50%;
}

.Shine {
  display: inline-block;
  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
  background-repeat: no-repeat;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeholderShimmer;
  animation-timing-function: linear;
}

@keyframes placeholderShimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 10px 0;
  }
}

<div class="Shine">
  <div class="Box"> </div>
</div>

Теперь он линейно растет слева направо.

Answer 1

Вам нужно отрегулировать градиент, а затем рассмотреть процентное значение, чтобы получить лучший эффект:

.Box {
  height: 100px;
  width: 100px;
  margin: 16px;
  background: #f6f7f8;
  border-radius: 50%;
}
.Shine {
  display: inline-block;
  background: 
    linear-gradient(to bottom right, #eeeeee 40%, #dddddd 50%, #eeeeee 60%);
  background-size:200% 200%;
  background-repeat: no-repeat;
  animation:placeholderShimmer 2s infinite linear;
}

@keyframes placeholderShimmer {
  0% {
    background-position:100% 100%; /*OR bottom right*/
  }

  100% {
    background-position:0 0; /*OR top left*/
  }
}

<div class="Shine">
 <div class="Box"></div>
</div>

Хитрость в том, что фон будет в два раза больше контейнера (200%x200%) с диагональным направлением, и мы сделаем окраску посередине (около 50%).Затем мы просто передвинем этот большой фон с top left на bottom right.

. Вы можете проверить этот ответ для более подробной информации о том, как он работает: https://stackoverflow.com/a/51734530/8620333