JSFiddle - React, Tailwind, and code Playground

by Adam Poczatek

HTML

<div id="emot"></div>

CSS

#emot { background: url('https://mail.google.com/mail/im/emotisprites/wink0.png') 0 0 no-repeat; width: 13px; height: 12px;
padding-left: 20px}

JavaScript

function animation() {
    if( parseInt($('#emot').css('background-position-y')) > -170 ) {
        $('#emot').css({ backgroundPositionY : '-=' + 12 }, 1000);
    }
}

$('#emot').append('<div>Hello Hannah!</div>');

$('#emot div').css({ opacity : 0}).delay(800).animate({ opacity : 1 }, 300);

window.setTimeout(function () {
    $('#emot div').text('You\'re a cock!');
}, 3000);

setInterval(function() {
      animation();
}, 90);