线性动画背景属性从左上到右下

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