JSFiddle - React, Tailwind, and code Playground
by luka kupunia
HTML
<div>
<span class="slideUp">luka</span>
</div>
CSS
span {
font-size: 24px;
display: block;
}
div {
overflow: hidden;
}
.slideUp {
animation: slideUp 1s cubic-bezier(0, 0.48, 0.26, 1) both;
}
@keyframes slideUp {
from {
visibility: hidden;
transform: translate3d(0,110%,0);
}
to {
visibility: visible;
transform: translate3d(0,0%,0);
}
}