JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <img class="object" src="http://pngimg.com/upload/balloon_PNG580.png" />
</div>
<br>
<br>
<button id="button">Fly!!!</button>

CSS

div {
    height: 300px;
    position: relative;
}
.object {
    width: 60px;
    position: absolute;
    bottom: 0;
    opacity: 0;
}
.move-up {
    -webkit-animation: balloon 1s linear;
    -moz-animation: balloon 1s linear;
    animation: balloon 1s linear;
}
@-webkit-keyframes balloon {
    5% {
        opacity: 1;
    }
    50% {
        -webkit-transform: translate(0, -150px);
        opacity: 1;
    }
    55%, 100% {
        -webkit-transform: translate(0, -150px);
        opacity: 0;
    }
}
@-moz-keyframes balloon {
    5% {
        opacity: 1;
    }
    50% {
        -moz-transform: translate(0, -150px);
        opacity: 1;
    }
    55%, 100% {
        -moz-transform: translate(0, -150px);
        opacity: 0;
    }
}
@keyframes balloon {
    5% {
        opacity: 1;
    }
    50% {
        transform: translate(0, -150px);
        opacity: 1;
    }
    55%, 100% {
        transform: translate(0, -150px);
        opacity: 0;
    }
}

JavaScript

$('#button').click(function () {
    $('.object').addClass('move-up');
    $('.object.move-up').on('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function () {
        $('.object').removeClass('move-up');
    });
});