How i can remove flickering in this Facebook-like loader?

Question

This is a Facebook-like loader. I don't know why this is flickering. I've tried changing the size and this affects the flickering but I can't understand how. Can someone help me to figure out why?

div{
width:600px;
height:100px;
}

.placeholder-waves {
    -webkit-animation-duration: 1.3s;
    animation-duration: 1.3s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: wave;
    animation-name: wave;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-direction: normal;
    animation-direction: normal;
    background-size: 1200px 104px;
    background: #f6fbfb;
    background: #eeeeee;
    background: linear-gradient(to right, #eeeeee 4%, #dddddd 47%, #eeeeee 87%);
}

@keyframes wave {
  0% {
    background-position: -468px 0
  }
  100% {
    background-position: 468px 0
  }
}

@-webkit-keyframes wave {
  0% {
    background-position: -468px 0
  }
  100% {
    background-position: 468px 0
  }
}

<div class="placeholder-waves"></div>

score 4 · Accepted Answer · answered Jan 17 '20 at 13:31

In your keyframes, you wrote : background-position: -468px 0;

Is there a reason for using 468px when your div's length is 600px ? Because that's what causing the jump. The gradient is 600px long because of the div. So use the same length everywhere (600px), and it works just fine :

div{
width:600px;
height:100px;
}

.placeholder-waves {
    -webkit-animation-duration: 1.3s;
    animation-duration: 1.3s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: wave;
    animation-name: wave;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-direction: normal;
    animation-direction: normal;
    background-size: 1200px 104px;
    background: #f6fbfb;
    background: #eeeeee;
    background: linear-gradient(to right, #eeeeee 4%, #dddddd 47%, #eeeeee 87%);
}

@keyframes wave {
  0% {
    background-position: -600px 0
  }
  100% {
    background-position: 600px 0
  }
}

@-webkit-keyframes wave {
  0% {
    background-position: -600px 0
  }
  100% {
    background-position: 600px 0
  }
}

<div class="placeholder-waves"></div>

Perfect, many thanks. I also recomment to see this question: https://stackoverflow.com/questions/55989735/css-background-gradient-shine-animation — Alessandro_Russo, Jan 17 '20 at 13:35

How i can remove flickering in this Facebook-like loader?

1 Answers1