JSFiddle - React, Tailwind, and code Playground

by Joel Silva

HTML

<link rel="stylesheet" href=" animate.min.css">
<body>
<h1><a id="Header" class="Header">My First Heading</a></h1>
<p>My first paragraph.</p>

<div id="animeContent">
</div>

</body>

CSS

body{
	background-color: rgb(171, 194, 232);
}
#Header{
	  -webkit-animation-duration: 10s;
		-webkit-animation-delay: 2s;
    -moz-animation-duration: 3s;
	  -moz-animation-delay: 2s;
    -o-animation-duration: 3s;
	  -o-animation-delay: 2s;
    animation-duration: 3s ;
		animation-delay: 2s;
}

JavaScript

$(function(){
	 var animationName = 'animated shake';
	 var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
	 
	 $('h1').on('click',function(){
		 $('#Header').addClass(animationName).one(animationEnd,function(){
			 $(this).removeClass(animationName);
		 });
	 });
 });