2

I am working on creating a Facebook content placeholder with the shimmer effect. I just want to animate the background property (or applying the linear gradient from top left to bottom right,) from the top left and end to the bottom right.

.Box {
  height: 100px;
  width: 100px;
  margin: 16px;
  background: #f6f7f8;
  border-radius: 50%;
}

.Shine {
  display: inline-block;
  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
  background-repeat: no-repeat;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeholderShimmer;
  animation-timing-function: linear;
}

@keyframes placeholderShimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 10px 0;
  }
}
<div class="Shine">
  <div class="Box"> </div>
</div>

Now it's growing linearly from left to right.

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Ajay Jayendran
  • 1,584
  • 4
  • 15
  • 37

1 Answers1

3

Youn need to adjust the gradient then consider percentage value to have a better effect:

.Box {
  height: 100px;
  width: 100px;
  margin: 16px;
  background: #f6f7f8;
  border-radius: 50%;
}
.Shine {
  display: inline-block;
  background: 
    linear-gradient(to bottom right, #eeeeee 40%, #dddddd 50%, #eeeeee 60%);
  background-size:200% 200%;
  background-repeat: no-repeat;
  animation:placeholderShimmer 2s infinite linear;
}

@keyframes placeholderShimmer {
  0% {
    background-position:100% 100%; /*OR bottom right*/
  }

  100% {
    background-position:0 0; /*OR top left*/
  }
}
<div class="Shine">
 <div class="Box"></div>
</div>

The trick is that the background will be twice as big as the container (200%x200%) with a diagonal direction and we make the coloration in the middle (around 50%). Then we simply slide this big background from top left to bottom right.

Related question for more details: Using percentage values with background-position on a linear-gradient

Temani Afif
  • 245,468
  • 26
  • 309
  • 415