Planet and Rocket animation
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 0 center;
animation:orbit 2s linear infinite;
transition:background-position 0.8s;
}
.container:hover .rocket{
background-position:80px center;
}
/* Задаются кейфреймы для анимации */
@keyframes orbit {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
