CSS Synchronous shimmer effect-CodePudding

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 >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>

CodePudding user response：

Just move the background-position in 2nd and 3rd by 150px and 300px respectively.

I made it a little bit more dynamic instead of hard coding the values.

It's basically just [value] - [150px] * [multiplier], where multiplier is 0, 1 and 2 for column 1, 2 and 3.

.grid {
  --box-size: 150px;
  
  gap: 10px;
  display: grid;
  grid-template-columns: repeat(3, var(--box-size));
}

.box {
  aspect-ratio: 1;
}

.shimmerBG {
  --background-image-size: 1200px;
  --background-image-negative: -1200px;
  --box-size-multiplier: 0;
  --background-position-start: calc(var(--background-image-negative) - var(--box-size) * var(--box-size-multiplier));
  --background-position-end:   calc(var(--background-image-size)     - var(--box-size) * var(--box-size-multiplier));
  
  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: var(--background-image-size) 100%;
}

.col-2 {
   --box-size-multiplier: 1;
}

.col-3 {
  --box-size-multiplier: 2;
}


@keyframes shimmer {
  0% {
    background-position: var(--background-position-start) 0;
  }

  100% {
    background-position: var(--background-position-end) 0;
  }
}

<div >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>

CodePudding user response：

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 >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>