I am trying to create a little fun toy to play with on my website, basically whenever you hover the logo, it rotates until you remove the cursor. I have achieved this by using rotate in CSS3, and it is working. But i was wondering if there is a way to prevent the "Snapback" (Smoothly bring it back to its original position when you unhover instead of it just jumping back instantly)
The code i am using is this:
#logo1:hover{
-webkit-animation: spin 0.7s infinite linear;
-moz-animation: spin 0.7s infinite linear;
-o-animation: spin 0.7s infinite linear;
-ms-animation: spin 0.7s infinite linear;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg);}
100% { -webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
0% { -moz-transform: rotate(0deg);}
100% { -moz-transform: rotate(360deg);}
}
@-o-keyframes spin {
0% { -o-transform: rotate(0deg);}
100% { -o-transform: rotate(360deg);}
}
@-ms-keyframes spin {
0% { -ms-transform: rotate(0deg);}
100% { -ms-transform: rotate(360deg);}
}
im thankful for any help!