JSFiddle - React, Tailwind, and code Playground

by joshuaohana

HTML

<div class="icon">
  <img id="cat" src="http://icons.iconarchive.com/icons/iconka/meow/256/cat-poo-icon.png">
</div>
<button onclick="addAnimation()">animate a gogo!</button>
<button onclick="doFlip()">now do a flip!</button>

CSS

.animate-it {
  animation: jiggle 2s;
}

@keyframes jiggle {
  20% { transform: translateX(-10px) scale(1.1,1.1) }
  40% { transform: translateX(0) scale(0.9,0.9) }
  60% { transform: translateX(20px) scale(1.1,1.1) }
  80% { transform: translateX(0) scale(0.9,0.9) }
  100% { scale(1,1) }
}

.do-flip {
  animation: flip 2s;
}

@keyframes flip {
  50% { transform: rotate(180deg) translateY(-50px) scale(1.5,1.5) }
  100% { transform: rotate(360deg) translateY(0) scale(1,1) }
}

JavaScript

addAnimation = function() {
	document.getElementById("cat").className = "";
  setTimeout(function() { document.getElementById("cat").className = "animate-it"; });
}

doFlip = function() {
	document.getElementById("cat").className = "";
  setTimeout(function() { document.getElementById("cat").className = "do-flip"; });
}