JSFiddle - React, Tailwind, and code Playground

by TheDiamondDoge

HTML

<div class="test" style="height:100px; width:100px; background-color: red;">

</div>

CSS

@keyframes slideInUp {
    from {
        transform: translate3d(0, -100px, 0);
        visibility: visible;
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

.slideInUp {
    animation-name: slideInUp;
}

.test {
  transform: translate3d(0, 100%, 0);
  animation-duration: 10000;
}