Issue
I have multiple squares side by side separated by a gap. Now I would like that when the shimmer effect ends on the first square, the shimmer effect moves on to the second square and so on. And then it repeats once the shimmer effect ends on the last square on the same row.
What is expected.
My code
.grid {
gap: 10px;
display: grid;
grid-template-columns: repeat(3, 150px);
}
.box {
height: 150px;
width: 100%;
}
.shimmerBG {
animation-duration: 2.2s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: shimmer;
animation-timing-function: linear;
background: #ddd;
background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
background-size: 1200px 100%;
}
@keyframes shimmer {
0% {
background-position: -1200px 0;
}
100% {
background-position: 1200px 0;
}
}
<div class="grid">
<div class="box shimmerBG"></div>
<div class="box shimmerBG"></div>
<div class="box shimmerBG"></div>
<div class="box shimmerBG"></div>
<div class="box shimmerBG"></div>
<div class="box shimmerBG"></div>
</div>
Solution
make the background fixed
.grid {
gap: 10px;
display: grid;
grid-template-columns: repeat(3, 150px);
}
.box {
height: 150px;
width: 100%;
}
.shimmerBG {
animation-duration: 2.2s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: shimmer;
animation-timing-function: linear;
background: #ddd;
background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%) fixed;
background-size: 100vw 100%;
}
@keyframes shimmer {
0% {
background-position: -100vw 0;
}
100% {
background-position: 100vw 0;
}
}
<div class="grid">
<div class="box shimmerBG"></div>
<div class="box shimmerBG"></div>
<div class="box shimmerBG"></div>
<div class="box shimmerBG"></div>
<div class="box shimmerBG"></div>
<div class="box shimmerBG"></div>
</div>
Answered By - Temani Afif
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.