JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<table id="numlist">
    <thead>
        <th>color</th>
    </thead>
    <tbody>
        <tr>
            <td>one</td>
        </tr>
        <tr>
            <td>two</td>
        </tr>
    </tbody>
</table>
<a href="#" id="add">add</a>

CSS

@-mozilla-keyframes newRowAdded {
    from {
        background-color: #ffa;
    }
    to {
        background-color: #fff;
    }
}
@-ms-keyframes newRowAdded {
    from {
        background-color: #ffa;
    }
    to {
        background-color: #fff;
    }
}
@-o-keyframes newRowAdded {
    from {
        background-color: #ffa;
    }
    to {
        background-color: #fff;
    }
}
@-webkit-keyframes newRowAdded {
    from {
        background-color: #ffa;
    }
    to {
        background-color: #fff;
    }
}
@keyframes newRowAdded {
    from {
        background-color: #ffa;
    }
    to {
        background-color: #fff;
    }
}

.newrow {
    -moz-animation: newRowAdded 2s;
    -ms-animation: newRowAdded 2s;
    -o-animation: newRowAdded 2s;
    -webkit-animation: newRowAdded 2s;
    animation: newRowAdded 2s;
}

JavaScript

$("#add").click(function (event) {
    event.preventDefault();
    $("#numlist").prepend("<tr class='newrow'><td>somenum</td></tr>");
});