JSFiddle - React, Tailwind, and code Playground

HTML

<span id="lorem">Lorem</span>

CSS

#lorem {
    font-size: 50px;
    color: red;
    position: absolute;
    top: 5%;
    left: 5%;
    animation: switch 10s linear infinite;
}
@keyframes switch {
    0% {
        bottom:auto;
        top:3%;
        left: 3%;
        right: auto;
        animation-timing-function: steps(1, end);
    }
    25% {
        left:auto;
        right:-2%;
        bottom: auto;
        top: 5%;
        animation-timing-function: steps(1, end);
        transform: rotate(90deg) translate(50px,0px);
    }
    50% {
        top:auto;
        bottom:3%;
        right: 3%;
        left: auto;
        animation-timing-function: steps(1, end);
        transform: rotate(180deg);
    }
    75% {
        right:auto;
        left:-2%;
        top: auto;
        bottom: 15%;
        animation-timing-function: steps(1, end);
        transform: rotate(-90deg) translate(0px,0px);
    }
}