JSFiddle - React, Tailwind, and code Playground

by basti1012

HTML

<div id="willkommen">

<div class="svg">
    <div data-text="100" id="word" class="Winning-text"></div>
</div>
</div>

CSS

#willkommen{
  height: 80vh;
  width: 80vw;
  transition: background-color 0.3s ease-in;
overflow:hidden;
display:flex;
}

.svg {

  

}
@keyframes pop-out {
  0% {
transform: scale3d(0, 0, 1);
    opacity: 1;
  }
  25% {
   transform: scale3d(1, 1, 1);
    opacity: 1;
  }
  100% {
    transform: scale3d(1.5, 1.5, 1);
    opacity: 0;
  }
}








@import url('https://fonts.googleapis.com/css?family=Sedgwick+Ave+Display');


.Winning-text {
    position: relative;
  top:40%;
  left:20%;


    font-size: 8vw;
   animation: pop-out 3s ease-in-out infinite;
 font-family: 'Sedgwick Ave Display', cursive;
    font-weight: 900;
  
  
  -webkit-text-stroke: 3px black;

    -webkit-background-clip: text;
    -webkit-text-fill-color: white;
    

}


p{
  text-align:center;
    margin-top:auto;
margin-bottom:auto;

}

JavaScript

var hue = 350;
  $(".svg").on('webkitAnimationIteration oanimationiteration msAnimationIteration animationiteration ', function() {
 var word = words[Math.floor(Math.random() * words.length)] + "!";
  $("#word").html('<p>'+word+'</p>');
 hue += 47;
 $('#willkommen').css("background-color", "hsl(" + hue + ", 100%, 50%)");
 });
 words = [ "Immer sehen wo ich Online bin ","Basti1012", "Ohne Javascript geht nix", "Ab hier  Javascript aktivieren", "Die Javascript  Seite für jedermann", "Tutorials","Generatoren",  "Userscripte  für Greasemonkey", "Userscripte für Tampermonkey","Nur beste  Hilfe Verlinkungen","Keine nervige Werbung","Kein Anmelden" ];