I have this rotating text effect that I created but I am having trouble getting adding CSS to create a smooth transition. I have posted an example of the effect I am trying to achieve. So far the text is rotating but no smooth animation
@keyframes animate {
0% {
content: "MIND"
}
25%{
content: "BODY"
}
50% {
content: "HEART"
}
75% {
content: "SOUL"
}
100% {
content: "TEARS"
}
}
.rotate-text::before {
content: "TRIBE";
animation: animate infinite 5s;
}<span class="example-text">This text will<span class='rotate-text'> </span></span>