How to make rolling item animation? - html

Question

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 class="items_container">
<div class="circle_container">
<div class="circle">
<p class="btext">
Start
</p>
</div>
</div>
<hr>
<div class="finish_container">
<div class="finish">
<p class="wtext">
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.]!

Answer 1

<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;
}