How to make an Animation in CSS with drag effect. Place Blur in motion

Question

I’m willing to put one loader animated in CSS with @keyframes on a page, but I would like to put a "drag effect" on it as if it gave a "blur" with a trace of Blur following the element when it moves...

Like this picture

But I only got so far... Does anyone have any hint or know a technique of how to get something similar to this?

.box {
  position: absolute;
  left: 50%;
  width: 400px;
  height: 200px;
  margin-left: -200px;
  overflow: hidden;
  background: #333;
}

.bola {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 75px;
  left: 175px;
  background: #999;
  border-radius: 50%;
  -webkit-animation: bolax 2s ease-in-out infinite;
          animation: bolax 2s ease-in-out infinite;
}

@keyframes bolax {
  0%, 100% {
    -webkit-transform: translateX(-150px);
            transform: translateX(-150px);
  }
  50% {
    -webkit-transform: translateX(150px);
            transform: translateX(150px);
  }
}

<div class="box">
  <div class="bola">
  </div>
</div>

Answer 1

You can create other balls to be the "Blur" and change only the animation-delay and the opacity.

The code below is the same as yours, I just added the elements .blurN and created the rules for these specific elements.

.box {
  position: absolute;
  left: 50%;
  width: 400px;
  height: 200px;
  margin-left: -200px;
  overflow: hidden;
  background: #333;
}

.bola {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 75px;
  left: 175px;
  background: #999;
  border-radius: 50%;
  -webkit-animation: bolax 2s ease-in-out infinite;
          animation: bolax 2s ease-in-out infinite;
}

.blur1 {
  animation-delay: 20ms;
  opacity: 0.5;
}

.blur2 {
  animation-delay: 40ms;
  opacity: 0.4;
}

.blur3 {
  animation-delay: 60ms;
  opacity: 0.3;
}

.blur4 {
  animation-delay: 80ms;
  opacity: 0.2;
}


@keyframes bolax {
  0%, 100% {
    -webkit-transform: translateX(-150px);
            transform: translateX(-150px);
  }
  50% {
    -webkit-transform: translateX(150px);
            transform: translateX(150px);
  }
}

<div class="box">
  <div class="bola"></div>
  <div class="bola blur1"></div>
  <div class="bola blur2"></div>
  <div class="bola blur3"></div>
  <div class="bola blur4"></div>
</div>

Answer 2

The "fastest" way to adapt your code is by adding a "shadow backwards".

The colors are a gradient between the front and the bottom:

27% {box-shadow:-10px 0 0 #999,-20px 0 0 #777,-30px 0 0 #666,-40px 0 0 #555,-50px 0 0 #444}
77% {box-shadow:10px 0 0 #999,20px 0 0 #777,30px 0 0 #666,40px 0 0 #555,50px 0 0 #444}

In this case, I pre-calculated the colors going from #999 to #444, but if you want to do independent of the background, switch to RGBA( cor do objeto, transparencia ), making transparency ever greater with every shadow.

Applying to your code:

.box {
  position: absolute;
  left: 50%;
  width: 400px;
  height: 200px;
  margin-left: -200px;
  overflow: hidden;
  background: #333;
}

.bola {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 75px;
  left: 175px;
  background: #ccc;
  border-radius: 50%;
  -webkit-animation: bolax 2s ease-in-out infinite;
          animation: bolax 2s ease-in-out infinite;
}

@keyframes bolax {
  0%, 100% {
    -webkit-transform: translateX(-150px);
            transform: translateX(-150px);
  }
  27% {box-shadow:
    -10px 0 0 #999,
    -20px 0 0 #777,
    -30px 0 0 #666,
    -40px 0 0 #555,
    -50px 0 0 #444;
  }
  50% {
    -webkit-transform: translateX(150px);
            transform: translateX(150px);
    }
  77% {box-shadow:
    10px 0 0 #999,
    20px 0 0 #777,
    30px 0 0 #666,
    40px 0 0 #555,
    50px 0 0 #444;
  }  }
}

<div class="box">
  <div class="bola">
  </div>
</div>