How to make rolling item animation?-CodePudding

body {
            margin: 0px;
        }
        .items_container {
            display: flex;
            align-items: center;
            width: 100%;
            height: 50px;
            background-color: rgb(200,200,200);
        }

        .circle_container {
            display: flex;
            align-items: center;
            position: relative;
            z-index: 100;
        }
        .circle {
            position: absolute;
            margin: 0px 10px;
            border: 0.5px solid black;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: black;
        }
        .btext {
            padding: 0px;
            margin: 0px;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%; 
            height: 100%;
        }

        hr {
            position: absolute;
            width: 100%;
            z-index: 90;
        }

        .finish_container {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            position: relative;
            width: 100%;
            z-index: 95;
        }
        .finish {
            position: absolute;
            margin: 0px 10px;
            border: 0.5px solid black;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: white;
        }
        .wtext {
            padding: 0px;
            margin: 0px;
            color: black;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%; 
            height: 100%;
        }

<div >
        <div >
            <div >
                <p >
                    Start
                </p>
            </div>
        </div>
        <hr>
        <div >
            <div >
                <p >
                    Finish
                </p>
            </div>
        </div>
    </div>

I want to roll black (start) circle to the white (finish) circle with smooth animation. Is it possible to make this? If it is, how can i do that?

![Do not mind this sentence. System gives an error that says 'It looks like your post is mostly code; please add some more details.' For posting my question I am adding this, sorry.]!

CodePudding user response：

<div classname="rotate"></div>
 @keyframes anirotate {
 0% {
     transform: translateX(0) rotate(0);
    }
 100%{
     transform: translateX(100px) rotate(360deg);
    }
}
.rotate::after{
 content: 'Start'
}
.rotate{
 width : 200px;
 height: 200px;
 border-radius: 50%;
 background-color: lightblue;
 animation :  anirotate 2s 0s 1 forwards;
}