Estou querendo colocar um loader
animado em CSS com @keyframes
em uma página, mas gostaria de colocar nele um "efeito de arrasto" como se ele desse uma "embaçada" com um rastro de blur seguindo o elemento quando ele se movimenta...
Tipo essa imagem
Mas só consegui chegar até aqui... Alguém tem alguma dica ou sabe uma técnica de como conseguir algo similar a isso?
.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>