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

我正在创建一个带有微光效果的Facebook内容占位符。我只想从左上角和右下角设置背景属性的动画（或应用从左上角到右下角的线性渐变）

.Box{
高度：100px；
宽度：100px；
利润率：16px；
背景：#f6f7f8；
边界半径：50%；
}
.发光{
显示：内联块；
背景：线性梯度（向右，#eeeeee 8%，#dddddd 18%，#eeeeee 33%）；
背景重复：无重复；
动画持续时间：1s；
动画填充模式：正向；
动画迭代次数：无限；
动画名称：闪烁；
动画计时功能：线性；
}
@关键帧闪烁{
0% {
背景位置：-1000px 0；
}
100% {
背景位置：10px0；
}
}

 > p>你需要调整梯度，然后考虑百分比值以获得更好的效果：


.Box{
高度：100px；
宽度：100px；
利润率：16px；
背景：#f6f7f8；
边界半径：50%；
}
.发光{
显示：内联块；
背景：
线性梯度（至右下角，#eeeeee 40%，#dddddd 50%，#eeeeee 60%）；
背景大小：200%200%；
背景重复：无重复；
动画：闪烁2s无限线性；
}
@关键帧闪烁{
0% {
背景位置：100%100%；/*或右下角*/
}
100% {
背景位置：0；/*或左上角*/
}
}

是的，我明白了，我提供的背景是容器的两倍大。谢谢：）太好了！！！！你还可以建议如何在页面加载时使用它。在页面加载时只应更改背景颜色，并保持原样。@bollam_rohith你能给我举个例子吗？或者画点什么。我不明白你的意思want@TemaniAFI如果我想在加载页面时立即使用相同的动画，而不是在hover@bollam_rohith像这样：？