JSFiddle - React, Tailwind, and code Playground

by MightyPork

HTML

<div id="wrap">
  <div id='cow'></div>
</div>

CSS

html,body{background:black;}

#cow {
  font-size: 20em;
  color: green;
  animation: spin 4s linear infinite;
}

@keyframes spin { 
  20% {color:yellow}
  40% {color:green}
  50% {color:cyan;transform: translate(0,20%) rotate(180deg);}
  80% {color:blue}
  100% {color:red;
     transform: rotate(-360deg); 
  }
}

#wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

JavaScript

var str = '🐄';

var div = document.getElementById('cow');

div.innerHTML = str;