.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(images/planet.png) no-repeat center center, url(images/spaceRetina.png) no-repeat center -400px;
	border-radius: 15px;
}

.rocket{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:url(images/rocket.png) no-repeat 50px center;

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

	transition:background-position .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);
	}
}

footer, p {
	text-align: center;
}