JSFiddle - React, Tailwind, and code Playground

by bgmort

HTML

<h1>Sammy Says</h1>
<h2>Let Uncle Sam say it</h2>
<textarea id="your text" cols="30" rows="10" placeholder="your text"></textarea>

<button id="play">Play</button>

<div id="sammy-cont">
  <img id="sammy" src="https://www.devf3.com/img/sammy.png">
  <img id="sammy-o" src="https://www.devf3.com/img/sammy-o.png">
  <div id="text">
    <div id="iwantyou">
      I want you
    </div>
    <div id="tosomething">
      To go away
      </div>
</div>

CSS

#sammy-cont {
  position: absolute;
  bottom:0px;
  display: none;
  right: 50px;
}

#sammy, #sammy-o {
  position: absolute;
  bottom: 0;
  right: 0;
}
#sammy-o {
  display: none;
}
#text {
  position: absolute;
  text-transform: uppercase;
  bottom: 86px;
  right: 25px;
  color: white;
  font-size: 2.2em;
  width: 200px;
  text-align: center;
  font-family: 'impact', 'verdana', sans-serif;
}

@keyframes talk {  
    /* I */
    0% { opacity: 1; }
    5% { opacity: 1; }
    5.01% { opacity: 0; }
    /* want */
    7% { opacity: 0; }
    7.01% { opacity: 1; }
    12% { opacity: 1; }
    12.01% { opacity: 0; }
    /* you */
    14% { opacity: 0; }
    14.01% { opacity: 1; }
    19% { opacity: 1; }
    19.01% { opacity: 0; }
    /* to */
    25% { opacity: 0; }
    25.01% { opacity: 1; }
    28% { opacity: 1; }
    28.01% { opacity: 0; }
    /* go */
    29% { opacity: 0; }
    29.01% { opacity: 1; }
    32% { opacity: 1; }
    32.01% { opacity: 0; }
    /* a- */
    33% { opacity: 0; }
    33.01% { opacity: 1; }
    36% { opacity: 1; }
    36.01% { opacity: 0; }
    /* -way */
    37% { opacity: 0; }
    37.01% { opacity: 1; }
    40% { opacity: 1; }
    40.01% { opacity: 0; }
    100% { opacity: 0; }
}

#sammy-o {
  display: block;
  opacity: 0;
/*
-webkit-animation: talk 0.7s linear 3 3s;
    -moz-animation: talk 0.7s linear 3 3s;
    -ms-animation: talk 0.7s linear 3 3s;
    -o-animation: talk 0.7s linear 3 3s;
    -webkit-animation: talk 0.7s linear 3;
    animation: talk 0.7s linear 3 0s, talk .4 linear 4 6s;
    */
}
.playing #sammy-o {
    animation: talk 10s linear 1 2.5s;
}
@keyframes show {  
    0% { opacity: 1; }
    99.9% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes creep {  
    0% { bottom: -300px; }
    100% { bottom: 0; }
}
#sammy-cont.playing {
  display: block;
  /*
    -webkit-animation: creep 3s linear;
    -moz-animation: creep 3s linear;
    -ms-animation: creep 3s linear;
    -o-animation: creep 3s linear;
    */
    animation:...

JavaScript

$('#play').on('click', clickPlay);

function clickPlay() {
$('#sammy-cont').toggleClass('playing');
}