<ul>    
                <li>    </li>
                <li>    </li>
                <li>    </li>
                
        </ul>
 
* { box-sizing: border-box; }
  
ul {  margin:0 auto; max-width: 300px; height: 100px; position: relative; display: flex; padding: 20px ; width: 100%; height: 100px; justify-content: space-between; filter: blur(10px) contrast(20);}

ul li { display: inline-block; width: 60px; height: 60px; background: #000; border-radius: 99em; }

ul li:nth-child(1) { position: absolute; top: 20px; left: 0; animation: an 15s ease infinite; background: red;    }
@keyframes an {
 0% {  left: 5%; }
 50% {  left: 70%; }
 100% {  left: 5%; }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.