JSFiddle - React, Tailwind, and code Playground

HTML

<br/>
<span id="angry" class="left">(╯°□°）╯</span>
<span class="left" id="table">┻━┻</span>
<span class="left"> ノ( º _ ºノ)</span>
<br/>
<span id="angry-word" class="left">GAH!</span>
<span id="calm-word" class="left">Chill out, bro</span>

CSS

body { font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif; font-size:20px; }
.left { float:left; }
#angry { margin-left: 10px; }
#table { 
    display:block;  /* transforms only work on block elements */
    margin-right: 50px; 
    -webkit-animation:spin 3s infinite; /* spin the table infinitely */
}
#angry-word {
    margin-left:20px;
    margin-right:200px;
    -webkit-animation:hide1 3s infinite; /* do the hide animation infititely */           
}

#calm-word {
    -webkit-animation:hide2 3s infinite; /* do the hide animation infititely */
}
    
/* flip the table - the timing allows the first part to happen faster */
@-webkit-keyframes spin {
    0% { -webkit-transform:rotate(-180deg); } /* the table is upside down in source, so make it appear right side up to start */
    20% { -webkit-transform:rotate(0deg); -webkit-transform:translate(50px); } /* flip the table and move it */
    100% { -webkit-transform:rotate(-180deg); } /* set it back */
}

/* opacity is a trick to hiding elements in webkit animations. display:none doesn't work */
/* the timing I have here allows them to appear/disappear instead of fading */
@-webkit-keyframes hide1 {
    0% { opacity:1; }
    19% { opacity:1; }
    20% { opacity:0; }
    99% {opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes hide2 {
    0% { opacity:0; }
    19% { opacity:0; }
    20% { opacity:1; }
    99% {opacity:1; }
    100% { opacity:0; }
}