JSFiddle - React, Tailwind, and code Playground

by Bhabani Raju

HTML

<div class="container">
	<div class="planet"></div>
	<div class="rocket"></div>
</div>

CSS

.container{
	width: 300px;
	height:300px;
	margin: 0 auto;
	position:relative;
	overflow:hidden;
}

.planet{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:url(http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/planet.png) no-repeat center center;
}

.rocket{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:url(http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/rocket.png) no-repeat 50px center;

	/* Chrome still requires the -webkit- prefix */
	-webkit-animation:orbit 2s linear infinite;
	animation:orbit 2s linear infinite;

	transition:background-position 0.8s;
}

.container:hover .rocket{
	background-position:80px center;
}

/* Define the keyframes of the animation */

@-webkit-keyframes orbit {
	from {
		-webkit-transform:rotate(0deg);}
	to {
		-webkit-transform:rotate(360deg);
	}
}

@keyframes orbit {
	from {
		transform:rotate(0deg);

		/* I am including the -webkit-transform properties, because
		   Chrome might start supporting keyframe without prefix in the future,
		   but we can't be certain whether it will support prefix-free transform
		   at the same time */

		-webkit-transform:rotate(0deg);}
	to {
		transform:rotate(360deg);
		-webkit-transform:rotate(360deg);
	}
}