jsfiddle.net/khalednabil/eWzBm/ thisThis is exactly what I want to achieve (animation starts when I hover and reveses after I hover off) only. I just do not want the animation start until I hover over the object because in jsfiddle above. In code the animation starts right after refreshing the code.
.class {
animation-name: out;
animation-duration: 2s;
/* Safari and Chrome: */
-webkit-animation-name: out;
-webkit-animation-duration: 2s;
}
.class:hover {
animation-name: in;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-direction: normal;
/* Safari and Chrome: */
-webkit-animation-name: in;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
}
@keyframes in {
from {
transform: rotate(50deg);
}
to {
transform: rotate(360deg);
}
}
@-webkit-keyframes in
/* Safari and Chrome */
{
from {
transform: rotate(50deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@keyframes out {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0deg);
}
}
@-webkit-keyframes out
/* Safari and Chrome */
{
from {
transform: rotate(360deg);
}
to {
-webkit-transform: rotate(0deg);
}
}<div style="width:100px; height:100px; background-color:red" class="class"></div>
