Can we create vanishing fly out animation with hot-toast?

[ishandutta2007]

For example I am looking for animation like this https://www.2048.org/
there number like +2, +4 etc fly out and vanish .
I have seen similar thing on google scoreboards.
Can we achieve something like that using hot-toast. If not can someone suggest the right package for it ?

[ishandutta2007]

Well I found a codepen doing the same https://codepen.io/carlosriera/pen/WxMjgJ
Now wondering is there is a react-lib which encapsulates it.

[ishandutta2007]

Find out a way to do it via translate3d

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->


@keyframes fadeInUp {
    from {
        transform: translate3d(0,40px,0);
        opacity: 1
    }

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

.animated {
    animation-duration: 2s;
    animation-fill-mode: both;
}

.animatedFadeInUp {
    opacity: 0
}

.fadeInUp {
    opacity: 0;
    animation-name: fadeInUp;
}

<!-- language: lang-html -->

<div class="animated animatedFadeInUp fadeInUp">
    <h2>This text will fly up and vanish</h2>
</div>

<!-- end snippet -->