CSS - 背景位置アニメーションの調整

Question

コンテンツの読み込み中に表示するプレースホルダ表示を作成しようとしています。私は、グラデーションの中間点をイラストレーションの目的で黒に変更しました（これは、プロダクションではより明るいグレーです）。

灰色のボックス全体で同じサイズになり、トランジションのすべてのポイントですべてのボックスに揃えられるように、グラデーションを調整することが目的です。

現在のところ、アニメーションは<div>のサイズに関連しており、<div>のサイズが異なるため、アニメーションは整列しません。

アニメーションを正しく整列させる方法に関するアイデアはありますか？

@keyframes Gradient { 
 
\t 0% { 
 
\t \t background-position-x: 100% 
 
\t } 
 
\t 100% { 
 
\t \t background-position-x: 0% 
 
\t } 
 
} 
 
    
 
.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 { 
 
\t 0% { 
 
\t \t background-position-x: 100% 
 
\t } 
 
\t 100% { 
 
\t \t background-position-x: 0% 
 
\t } 
 
} 
 
    
 
.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 { 
 
\t 0% { 
 
\t \t background-position-x: 4000px; 
 
\t } 
 
\t 100% { 
 
\t \t background-position-x: 0% 
 
\t } 
 
} 
 
    
 
.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>