JSFiddle - React, Tailwind, and code Playground

by Sparrow Squire

HTML

<div id="test">
Hello World
</div>

CSS

.run-animation {
	     position: relative;
	     -webkit-animation: fancy-animation 2s ease;
	        -moz-animation: fancy-animation 2s ease;
	             animation: fancy-animation 2s ease;
}

@-webkit-keyframes fancy-animation {
  from {left: -500px;}
  to {left: 0;}
}
@-moz-keyframes fancy-animation {
  from {left: -500px;}
  to {left: 0;}
}
@keyframes fancy-animation {
  from {left: -500px;}
  to {left: 0;}
}

JavaScript

$(document).ready(function() {  
  runAnim();
});

function runAnim() {
		//$('#test').animate(addAnim,6000).animate(removeAnim,6000, runAnim);
    $('#test').animate({'margin-top':'90px'},6000).animate({'margin-top':'40px'},6000, runAnim); 
}

function addAnim() {
	$('#test').addClass('run-animation');
}
function removeAnim() {
	$('#test').removeClass('run-animation');
}