CSS - 坐标背景位置动画答案

【问题标题】：CSS - Coordinate background-position animationCSS - 坐标背景位置动画
【发布时间】：2017-10-25 15:45:23
【问题描述】：

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

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

目前，动画是相对于<div>的大小，由于<div>s的大小不同，动画没有对齐。

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

@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>

【问题讨论】：

标签： html css css-animations linear-gradients

【解决方案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>

【讨论】：

【解决方案2】：

这是因为您正在根据 div 的宽度设置背景大小。因此，如果您将其设置为固定宽度，它可能就像您想要的那样。

这里，我简单地将 background-size 的宽度设置为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>

【讨论】：