In the above image, I want those 5 texts to rotate in an oval shape infinitely, that oval is just for reference. I'm not that good at CSS, any help would be grateful.
HTML
<div class="oval" id="oval">
<div class="floating-texts">
<span class="text1 text">#text1</span>
<span class="text2 text">#text2</span>
<span class="text3 text">#text3</span>
<span class="text4 text">#text4</span>
<span class="text5 text">#text5</span>
</div>
</div>
css
.oval {
top: 20%;
left: 65%;
position: absolute;
border: 2px solid black;
width: 400px;
height: 200px;
background: transparent;
border-radius: 200px / 100px;
}
.text {
position: absolute;
color: black;
font-size: 1.2rem;
}
.text1 {
left: 100%;
top: 50%;
}
.text2 {
right: 100%;
top: 60%;
}
.text3 {
bottom: 90%;
}
.text4 {
top: 100%;
left: 40%;
}
.text5 {
bottom: 100%;
left: 70%;
}