What type of css animation is this called? - css-animations

Question

I got 4 divs with operators on css.
<div class="key_1"> Text1 </div>
<div class="key_2"> Text2 </div>
<div class="key_3"> Text3 </div>
<div class="key_4>" Text4 </div>
.key_1::before {
content: "}";
animation: key_1 ease-in-out infinite alternate 4s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
}
.key_2::before {
content: "+";
animation: key_2 ease-in-out infinite alternate 4s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
}
.key_3::before {
content: "*";
animation: key_3 ease-in-out infinite alternate 4s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
}
.key_4::before {
content: ";";
animation: key_4 ease-in-out infinite alternate 4s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
}
And it rotates one on one and changes the text infinitely.
I want to search on how to make this animation smoother because currently it is faster in some point and has slight pause when the loop ends)
My current form is I made 4 keyframes separately.
#keyframes key_1 {
17% {
content: "=";
}
51% {
content: "/";
}
84% {
content: "}";
}
}
#keyframes key_2 {
7% {
content: "/";
}
42% {
content: "]";
}
76% {
content: "+";
}
}
#keyframes key_3 {
37% {
content: "+";
}
68% {
content: ">";
}
100% {
content: "*";
}
}
#keyframes key_4 {
27% {
content: "!";
}
60% {
content: ")";
}
92% {
content: ";";
}
}
I calculated the time so the texts changes taking turns. Sorry for the mess.
Is there a better way to do this or did I calculate the percentage wrong?