JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="100%" height="20px">
                    <g transform="translate(0,10)">
                        <rect width="100%" height="2" y="-1" x="0" stroke="green" />
                        <circle r="4" cx="5" stroke="rgb(0, 0, 0)" fill="rgb(255, 255, 255)" />
                    </g>
                </svg>

CSS

@-webkit-keyframes ios-sweep-test {
    0% {
        cx: 5;
    }

    100% {
        cx: 100%;
    }
}

@keyframes sweep {
    from {
        cx: 5;
    }

    to {
        cx: 100%;
    }
}

circle {
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-name: sweep;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    transform:translate3d(0, 0, 0)

    -webkit-animation-duration: 3s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-name: ios-sweep-test;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-transform: translate3d(0, 0, 0);
}