我在这里遵循本教程:https://cloudcannon.com/deconstructions/2014/11/15/facebook-content-placeholder-deconstruction.html
创建一个虚拟加载器。不幸的是，本教程包含固定像素值，我希望它适用于所有尺寸的屏幕。所以我这样调整了动画:
@keyframes placeHolderShimmer {
0% {
background-position: -30vw 0
}
100% {
background-position: 30vw 0
}
}
.c-animated-background {
animation-duration: 1.5s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: placeHolderShimmer;
animation-timing-function: linear;
background: fff;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
height: 100%;
width: 100%;
position: relative;
padding-top: 50px;
-webkit-backface-visibility: hidden
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body class="c-animated-background">
</body>
</html>不幸的是，在 1.5 秒后动画结束时，灰色区域会向前或向后跳跃，具体取决于我设置的关键帧背景位置值。我怎样才能防止这种情况发生并使过渡顺利进行？此外，动画似乎比我想象的更强烈 - 当我想用我的 macbook 2016' 在 chrome 的开发模式下检查背景元素时，它挂起大约 15 秒。我应该改用过渡/变换动画吗？
最佳答案
请查看更新后的答案希望对您有所帮助。目前我认为没有必要移动 body 。但是您可以在其中定义一个分区，并使其成为相对于 body 的绝对。
VW 在定义为负值时效果不佳。请检查更新的答案
@keyframes placeHolderShimmer {
0% {
background-position: 0px 0;
}
100% {
background-position: 100em 0;
}
}
.c-animated-background {
animation-duration: 3s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: placeHolderShimmer;
animation-timing-function: linear;
background: fff;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
height: 100%;
width: 100%;
position: absolute;
padding-top: 50px;
-webkit-backface-visibility: hidden;
left:0;
right:0;
top:0;
bottom:0;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="c-animated-background">
</div>
</body>
</html>关于html - CSS - 无限动画(向右加载渐变移动)闪烁，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46578562/