Continuous Box Rotate - CSS animation - css

Question

So am fairly new in CSS animation and I wanted to ask a question I created this box and it as a small box inside that rotates from top to bottom, right to left and alternate but am wondering how can I make that it rotates fully around continuously, from the point of origin.
I tried setting the transform translateX to -232% once it reach back at the point of origin but end up not going back to its origin as intent.
<div class="parent">
<div class="child"></div>
</div>
<style>
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 62.5%;
font-family: Arial, Helvetica, sans-serif;
}
body {
font-size: 1.22rem;
line-height: 1.2;
}
.parent {
background: #aed4ff;
height: 300px;
width: 300px;
}
.child {
background-color: rgb(143, 36, 36);
width: 90px;
height: 90px;
display: block;
}
.parent:hover .child {
animation: left-to-right 2s ease-in-out forwards;
animation-play-state: paused;
cursor: pointer;
}
#keyframes left-to-right {
0% {
transform: translateX(0);
color: red;
}
33% {
transform: translateY(232%);
}
50% {
background-color: blue;
}
66% {
transform: translateX(232%) translateY(232%);
}
100% {
transform: translateX(232%);
background-color: black;
}
}
</style>

Answer 1

You need to add another keyframe with translateX(0) at 100% to move the element back to the original position, and for the other "transform-keyframes" use 25%, 50% and 75% instead of 33%, 67% and 100%.
And of course animation-iteration-count: infinite; to keep it going round.
So that would be
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 62.5%;
font-family: Arial, Helvetica, sans-serif;
}
body {
font-size: 1.22rem;
line-height: 1.2;
}
.parent {
background: #aed4ff;
height: 300px;
width: 300px;
}
.child {
background-color: rgb(143, 36, 36);
width: 90px;
height: 90px;
display: block;
}
.parent:hover .child {
animation: left-to-right 3s ease-in-out forwards;
animation-iteration-count: infinite;
cursor: pointer;
}
#keyframes left-to-right {
0% {
transform: translateX(0);
color: red;
}
25% {
transform: translateY(232%);
}
50% {
transform: translateX(232%) translateY(232%);
background-color: blue;
}
75% {
transform: translateX(232%);
}
100% {
transform: translateX(0);
background-color: black;
}
}
<div class="parent">
<div class="child"></div>
</div>

Answer 2

You can set your animation to run continuously by adding this to your css
animation-iteration-count: infinite;