JSFiddle - React, Tailwind, and code Playground

by Andy keh

HTML

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

CSS

@-webkit-keyframes move{
    0%{
        left:-20px;
    }
    50%{
        left:200px;
    }
    100%{
        left:-20px;
    }
}
@keyframes move{
    0%{
        left:-20px;
    }
    50%{
        left:200px;
    }
    100%{
        left:-20px;
    }
}
ul{
    position: relative;
    padding: 0;
    overflow: hidden;
    margin: 50px;
    list-style: none;
    -webkit-filter: contrast(20);
    -moz-filter: contrast(20);
    -ms-filter: contrast(20);
    filter: contrast(20);
    background: white;
    display: inline-block;
    font-size: 0;
}
li{
    display: inline-block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: black;
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
    margin: 20px;
}
li:last-child{
    position: absolute;
    top:0;
    -webkit-animation: move 2s linear infinite;
    animation: move 2s linear infinite;
}