CSS - 坐标背景位置动画

Question

我正在尝试创建一个占位符显示，以便在内容加载时显示。出于说明目的，我将渐变的中点更改为黑色（在生产中它将是浅得多的灰色）。

目的是协调渐变，使其在所有灰色框中的大小相同，并且在过渡的所有点上在所有框中对齐。

目前，动画相对于<div>的大小，由于<div>的大小不同，因此动画未对齐。

关于如何使动画正确对齐的任何想法？

@keyframes Gradient {
	0% {
		background-position-x: 100%
	}
	100% {
		background-position-x: 0%
	}
}
  
.placeholder {
    background: linear-gradient(90deg, #F0F0F0 25%, #000 50%, #F0F0F0 75%);
    animation: Gradient 2s ease infinite;
    margin-bottom: 1em;
    display: block;
    background-size: 400% 100%;
}
.placeholder.fake-h1 {
    height: 4em;
    width: 40%;
    border-radius: 8px;
}
.placeholder.fake-p {
    height: 1.5em;
    width: 100%;
    border-radius: 5px;
}
.placeholder.fake-p.short {
    width: 60%;
}

<div class="placeholder fake-h1"></div>
<div class="placeholder fake-p"></div>
<div class="placeholder fake-p"></div>
<div class="placeholder fake-p short"></div>
<br />
<div class="placeholder fake-p"></div>
<div class="placeholder fake-p"></div>
<div class="placeholder fake-p short"></div>

Answer 1

您只需要将背景设置为固定：

background: linear-gradient(90deg, #F0F0F0 25%, #000 50%, #F0F0F0 75%) fixed;

@keyframes Gradient {
	0% {
		background-position-x: 100%
	}
	100% {
		background-position-x: 0%
	}
}
  
.placeholder {
    background: linear-gradient(90deg, #F0F0F0 25%, #000 50%, #F0F0F0 75%) fixed;
    animation: Gradient 2s ease infinite;
    margin-bottom: 1em;
    display: block;
    background-size: 400% 100%;
}
.placeholder.fake-h1 {
    height: 4em;
    width: 40%;
    border-radius: 8px;
}
.placeholder.fake-p {
    height: 1.5em;
    width: 100%;
    border-radius: 5px;
}
.placeholder.fake-p.short {
    width: 60%;
}

<div class="placeholder fake-h1"></div>
<div class="placeholder fake-p"></div>
<div class="placeholder fake-p"></div>
<div class="placeholder fake-p short"></div>
<br />
<div class="placeholder fake-p"></div>
<div class="placeholder fake-p"></div>
<div class="placeholder fake-p short"></div>

Answer 2

这是因为

您是根据div 的宽度设置背景大小的。因此，如果您将其设置为固定宽度，则可能与您想要的一样。

在这里，我只是将背景大小的宽度设置为 4000px .您可以根据需要进行调整。顺便说一句，你对这个占位符的想法看起来真的很酷。

0% { background-position-x: 4000px; } background-size: 4000px 100%;

@keyframes Gradient {
	0% {
		background-position-x: 4000px;
	}
	100% {
		background-position-x: 0%
	}
}
  
.placeholder {
    background: linear-gradient(90deg, #F0F0F0 25%, #000 50%, #F0F0F0 75%);
    animation: Gradient 5s ease infinite;
    margin-bottom: 1em;
    display: block;
    background-size: 4000px 100%;
}
.placeholder.fake-h1 {
    height: 4em;
    width: 40%;
    border-radius: 8px;
}
.placeholder.fake-p {
    height: 1.5em;
    width: 100%;
    border-radius: 5px;
}
.placeholder.fake-p.short {
    width: 60%;
}

<div class="placeholder fake-h1"></div>
<div class="placeholder fake-p"></div>
<div class="placeholder fake-p"></div>
<div class="placeholder fake-p short"></div>
<br />
<div class="placeholder fake-p"></div>
<div class="placeholder fake-p"></div>
<div class="placeholder fake-p short"></div>