JSFiddle - React, Tailwind, and code Playground

HTML

<h1 class="mb-0" id="random1">?</h1>
<h1 class="mb-0" id="random2">?</h1>

JavaScript

changeText('random1', Math.floor(Math.random() * 100) + "°")
changeText('random2', Math.floor(Math.random() * 100) + "°")

function changeText(id, newText) {
        item = document.getElementById(id);
        if (item === null) {
            return false
        }
        let animation = item.animate([
            // keyframes
            {transform: 'translateY(0px)', opacity: '1'},
            {transform: 'translateY(1px)', opacity: '0.9'},
            {transform: 'translateY(4px)', opacity: '0.7'},
            {transform: 'translateY(9px)', opacity: '0.5'},
            {transform: 'translateY(14px)', opacity: '0.3'}

        ], {
            // timing options
            duration: 500,
        });
        animation.onfinish = function () {
            item.innerText = newText;
            item.animate([
                // keyframes
                {transform: 'translateY(14px)', opacity: '0.3'},
                {transform: 'translateY(9px)', opacity: '0.5'},
                {transform: 'translateY(4px)', opacity: '0.7'},
                {transform: 'translateY(1px)', opacity: '0.9'},
                {transform: 'translateY(0px)', opacity: '1'}
            ], {
                // timing options
                duration: 500,
            });
        };
    }