.contenedor{
	background: #FFFFFF;
	width: 300px;
	height: 300px;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}

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

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

    
	-webkit-animation:orbita 2s linear infinite;
	animation: orbita 2s linear infinite;

	transition-duration: background-position 0.8s;
}

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



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

@keyframes orbita {
    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);
    }
}