JSFiddle - React, Tailwind, and code Playground

by navinleon

HTML

<div class="element-to-animate">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At temporibus nihil voluptatibus explicabo quo excepturi voluptas eveniet ex et quas. Ipsam at fugiat ipsa hic saepe alias nam debitis dolores.</div>

CSS

.element-to-animate {
    -webkit-animation: animateMessage 20s;
    -moz-animation: animateMessage 20s;
    -o-animation: animateMessage 20s;
    animation: animateMessage 20s;
    height: 0px;
    overflow: hidden;
}
@keyframes animateMessage {
    0% {
        height: 0px;
    }
    49% {
        height: 45px;
    }
    50% {
        height: 45px;
    }
    99% {
        height: 45px;
    }
    100% {
        height: 0px;
    }
}
@-webkit-keyframes animateMessage {
    0% {
        height: 0px;
    }
    49% {
        height: 45px;
    }
    50% {
        height: 45px;
    }
    99% {
        height: 45px;
    }
    100% {
        height: 0px;
    }
}
@-moz-keyframes animateMessage {
    0% {
        height: 0px;
    }
    49% {
        height: 45px;
    }
    50% {
        height: 45px;
    }
    99% {
        height: 45px;
    }
    100% {
        height: 0px;
    }
}
@-o-keyframes animateMessage {
    0% {
        height: 0px;
    }
    49% {
        height: 45px;
    }
    50% {
        height: 45px;
    }
    99% {
        height: 45px;
    }
    100% {
        height: 0px;
    }
}
@keyframes animateMessage {
    0% {
        height: 0px;
    }
    49% {
        height: 45px;
    }
    50% {
        height: 45px;
    }
    99% {
        height: 45px;
    }
    100% {
        height: 0px;
    }
}