如何为从左上角到右下角的线性渐变设置动画？

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.

有关更多详细信息的相关问题：Using percentage values with background-position on a linear-gradient

如何为从左上角到右下角的线性渐变设置动画？

How to animate linear-gradient from top left to bottom right?

css

linear-gradients

css-animations