CODEWITHSUNDEEP
htmlcsscss-animationslinear-gradients
abagshaw
abagshaw

Reputation: 6592

CSS - Coordinate background-position animation

I'm trying to create a placeholder display to show while content is loading. I've changed the midpoint of the gradient to black for illustration purposes (it would be a much lighter grey in production).

The aim is to coordinate the gradient so that it is the same size across all of the grey boxes and is aligned across all boxes at all points of the transition.

Currently, the animation is relative to the size of the <div> and as the sizes of the <div>s are different, the animations are not aligned.

Any ideas on how to get the animations properly aligned?

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

Upvotes: 3

Views: 77

Answers (2)

Gabriel Cheung
Gabriel Cheung

Reputation: 546

This is because you are setting the background size based on the width of the div. So if you set it to a fix width, it may be like what you want.

Here, I simply set the width of background-size to 4000px. You can adjust it as you want. BTW, your idea of this placeholder looks really cool.

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>

Upvotes: 0

abney317
abney317

Reputation: 8502

You just need to set the background as fixed:

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>

Upvotes: 2

Related Questions