Animation and transitions using CSS
CSS animation is finally available in all major browsers, even in IE (starting with version 10). There are two ways to create animations in CSS.
The first one is very simple, it is carried out through the animation of CSS property changes using the transition declaration. With transitions, you can create mouse hover or mouse click effects, or you can start an animation by changing the style of an element using JavaScript. In the example below, the transition is performed when the mouse hovers over the planet, this will force the rocket to approach.
The second way of defining animation is a little more complicated – it involves describing special moments of animation using the @keyframe rule. This will allow you to create a repeating animation that does not depend on user actions and is not triggered using Javascript.
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;
-webkit-animation:orbit 2s linear infinite;
animation:orbit 2s linear infinite;
transition:background-position 0.8s;
}
.container:hover .rocket{
background-position:80px center;
}
@-webkit-keyframes orbit {
from {
-webkit-transform:rotate(0deg);}
to {
-webkit-transform:rotate(360deg);
}
}
@keyframes orbit {
from {
transform:rotate(0deg);
-webkit-transform:rotate(0deg);}
to {
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
}
}
