JSFiddle - React, Tailwind, and code Playground

by Terry Mun

HTML

<div></div>

CSS

div {
    background-color: #eee;
    animation: test 1s ease-in-out 0s 1 forwards;
    width: 25%;
    height: 100px;
    margin: 0 auto;
}
@keyframes test {
    to {
        background-color: #b13131;
        width: 100%;
        height: 200px;
    }

}
div p {
    color: #eee;
    text-align: center;
    line-height: 200px;
}

JavaScript

$('div').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function() {
    $(this).html('<p>Animation completed.</p>');
});