I am looking to add a shimmer animation to a group of HTML elements, making it appear as though one continuous shimmer is passing through all the elements. I have observed this effect achieved with text animations using background-clip: text; in CSS and applying the animation to the parent element.
Is there a way to apply a similar animation to a collection of elements simultaneously, clipping to the HTML elements instead of just text like using background-clip: text?
.shimmer-box {
width: 300px;
height: 75px;
margin: 20px 20px;
}
.animation {
background: linear-gradient(-45deg, #eee 40%, #fafafa 50%, #eee 60%);
background-size: 300%;
animation-name: shimmer;
animation-duration: 1000ms;
animation-timing-function: linear;
animation-delay: 0;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
}
@keyframes shimmer {
0% {
background-position-x: 100%;
}
100% {
background-position-x: 0%;
}
}
.gray {
background-color: #e2e2e2;
}
.flex-row {
display: flex;
align-items: center;
gap: 12px;
}
.circle {
width: 30px;
height: 30px;
border-radius: 50%;
}
.short-row {
height: 30px;
flex: 1;
border-radius: 8px;
}
.body-box {
margin-top: 12px;
width: 342px;
height: 100px;
border-radius: 8px;
}
.container {
display: inline-block;
}<h4>This animation works on a single element</h4>
<div class="shimmer-box animation"></div>
<h4>If I apply the animation to each element they are disjointed</h4>
<div class="container">
<div class="flex-row">
<div class="circle gray animation"></div>
<div class="short-row gray animation"></div>
<div class="short-row gray animation"></div>
</div>
<div class="body-box gray animation"></div>
</div>
<div>
<h4>I would like this animation to run in unison on all the elements here</h4>
<paragraph>Ideally it looks like one shimmer running accross all the elements in unison</paragraph>
</div>
<div class="container">
<div class="flex-row">
<div class="circle gray"></div>
<div class="short-row gray"></div>
</div>
<div class="body-box gray"></div>
</div>