Hover off animation? - html

Question

How do I do the inverse animation when I "hover off" the .child element (css3 only if possible)?
Fiddle
HTML:
<div class="child">
<i class="fa fa-video-camera spin" style="font-size:22px;"></i>
</div>
CSS:
.child:hover .spin{
-webkit-animation: spin 0.2s linear;
-moz-animation: spin 0.2s linear;
-o-animation: spin 0.2s linear;
animation: spin 0.2s linear;
}
#-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

Answer 1

The easiest way would be to use transition instead of keyframes:
.child .spin {
transition: transform .2s linear;
}
.child:hover .spin{
transform: rotate(360deg);
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="child">
<i class="fa fa-video-camera spin" style="font-size:22px;"></i>
</div>
Comes with auto-reverse built in. Much less code.

Answer 2

Don't use animation, use transition
<div class="camera"></div>
<style>
.camera{
height: 100px;
width: 50px;
background-color: red;
transition: 2s;
}
.camera:hover{
transform: rotate(360deg);
}
</style>
Fiddle

Answer 3

Well, you can do that. But you'll need a default animation too.
.child{
margin-top:20px;
margin-left:20px;
}
.child .spin{
-webkit-animation: spin 0.5s ease-in-out;
-moz-animation: spin 0.5s ease-in-out;
-o-animation: spin 0.5s ease-in-out;
animation: spin 0.5s ease-in-out;
}
.child:hover .spin{
-webkit-animation: spinh 0.5s ease-in-out;
-moz-animation: spinh 0.5s ease-in-out;
-o-animation: spinh 0.5s ease-in-out;
animation: spinh 0.5s ease-in-out;
}
#-moz-keyframes spin {
from {
-moz-transform: rotate(360deg);
}
to {
-moz-transform: rotate(0deg);
}
}
#-webkit-keyframes spin {
from {
-webkit-transform: rotate(360deg);
}
to {
-webkit-transform: rotate(0deg);
}
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#-webkit-keyframes spinh {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#keyframes spinh {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<div class="child">
<i class="fa fa-video-camera spin" style="font-size:22px;"></i>
</div>
See the working example.