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 am curious if it's possible to animate the movement of the black (start) circle to the white (finish) circle smoothly. If so, how can I achieve this effect?
![Ignore this sentence. System error message states 'It looks like your post is mostly code; please add some more details.' Apologies for adding this extra text to my question for posting purposes.]!