circular animation using CSS - html

Question

I'm trying to create an animation for a three-letter word. For now, take the word XYZ. The idea is that each letter of XYZ will move in a circular path of different radii and directions (Like one letter moving right, another left, and bottom) before coming back to the original position. I have tried using different forms of code for this but am failing because I don't clearly understand how to animate circular motion with a fixed origin. Will be helpful if anyone could share how to do this. I am also attaching part of my code
.animation-container {
display: flex;
position: relative;
top: 10rem;
left: 50%;
align-items: center;
text-align: center;
}
.letter {
animation: move-letter 4s ease-in-out infinite;
animation-iteration-count: infinite;
}
#keyframes move-letter {
from {
-webkit-transform: rotate(0deg) translateX(150px) rotate(0deg);
}
to {
-webkit-transform: rotate(360deg) translateX(150px) rotate(-360deg);
}
}
<div class="animation-container">
<div class="letter X">X</div>
<div class="letter Y">Y</div>
<div class="letter Z">Z</div>
</div>

Answer 1

It depends what you actually want, but you definitely need three different animations (i.e. with different settings), and 3 or more stages per animation, returning to the first position in each case:
.animation-container {
display: flex;
position: relative;
top: 10rem;
left: 50%;
align-items: center;
text-align: center;
}
.letter.X {
animation: move-letter_x 4s ease-in-out infinite;
animation-iteration-count: infinite;
}
.letter.Y {
animation: move-letter_y 4s ease-in-out infinite;
animation-iteration-count: infinite;
}
.letter.Z {
animation: move-letter_z 4s ease-in-out infinite;
animation-iteration-count: infinite;
}
#keyframes move-letter_x {
0% {
-webkit-transform: rotate(0deg) translateX(150px) rotate(0deg);
}
50% {
-webkit-transform: rotate(360deg) translateX(20px) rotate(-360deg);
}
100% {
-webkit-transform: rotate(0deg) translateX(150px) rotate(0deg);
}
}
#keyframes move-letter_y {
0% {
-webkit-transform: rotate(360deg) translateX(150px) rotate(-360deg);
}
50% {
-webkit-transform: rotate(0deg) translateX(80px) rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg) translateX(150px) rotate(-360deg);
}
}
#keyframes move-letter_z {
0% {
-webkit-transform: rotate(0deg) translateX(150px) rotate(0deg);
}
50% {
-webkit-transform: rotate(360deg) translateX(140px) rotate(-360deg);
}
100% {
-webkit-transform: rotate(0deg) translateX(150px) rotate(0deg);
}
}
<div class="animation-container">
<div class="letter X">X</div>
<div class="letter Y">Y</div>
<div class="letter Z">Z</div>
</div>