JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <div></div>
</div>

CSS

body > div {
    height: 50px;
    overflow: hidden;
}
div > div {
    width: 50px;
    height: 50px;
    background-color: black;
    animation: slideOutIn 4s ease-in-out infinite;
}

@keyframes slideOutIn {
    0%, 42.5%, 85%, 100% {
        transform: translateY(0);
    }
    28.33333%, 56.66667% {
        transform: translateY(15%);
    }
    92.5% {
        transform: translateY(100%);
    }
    92.5001% {
        transform: translateY(-100%);
    }
}