JSFiddle - React, Tailwind, and code Playground

by nkovacs

HTML

<div id="thunder">
</div>

CSS

body {
    background: LightGreen ;
}

#thunder {
    background: url(http://dev.mito.hu/nkovacs/otp/edukacio2013/docroot/images/thunder.png);
    display: block;
	height: 140px; width: 152px;
    
    -webkit-animation: move 1s infinite alternate linear, dothunder 0.5s steps(1) infinite;
}

    @-webkit-keyframes move {
	  0% { margin-left: -5px; }
	  50% { margin-top: -5px; }
	  75% { margin-top: 15px; }
	  100%   { margin-left: 15px; }
	}

	@-moz-keyframes move {
	  0% { margin-left: -5px; }
	  50% { margin-top: -5px; }
	  75% { margin-top: 15px; }
	  100% { margin-left: 15px; }
	
	}
	
	@-o-keyframes move {
	  0% { margin-left: -5px; }
	  50% { margin-top: -5px; }
	  75% { margin-top: 15px; }
	  100% { margin-left: 15px; }
	
	}
	
	@keyframes move {
	  0% { margin-left: -5px; }
	  50% { margin-top: -5px; }
	  75% { margin-top: 15px; }
	  100% { margin-left: 15px; }
	
	}

	@-webkit-keyframes dothunder {
	  0% { background-position: -185px 7px; -webkit-animation-timing-function: steps(1); }
	  50% { background-position: -6px 7px; -webkit-animation-timing-function: steps(1); }
	  75% { background-position: -185px 7px; -webkit-animation-timing-function: steps(1); }
	  80% { background-position: -6px 7px; -webkit-animation-timing-function: steps(1); }
	  100% { background-position: -6px 7px; -webkit-animation-timing-function: steps(1); }
	}
	
	@-moz-keyframes dothunder {
	  0% { background-position: -185px 7px; }
	  50% { background-position: -6px 7px; }
	  75% { background-position: -185px 7px; }
	  80% { background-position: -6px 7px; }
	  100% { background-position: -6px 7px; }
	}
	
	@-o-keyframes dothunder {
	  0% { background-position: -185px 7px; }
	  50% { background-position: -6px 7px; }
	  75% { background-position: -185px 7px; }
	  80% { background-position: -6px 7px; }
	  100% { background-position: -6px 7px; }
	}
	
	@keyframes dothunder {
	  0% { background-position: -185px 7px; }
	  50% { background-position: -6px 7px; }
	  75% { background-position:...