When I hover my mouse over a specific div, I have implemented a CSS animation that causes it to rotate infinitely. Here is a snippet of the relevant code:
@-webkit-keyframes rotate {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
#square {
background-color: #369;
height: 100px;
margin: 50px;
width: 100px;
-webkit-transform: rotate(0deg);
}
#square:hover {
-webkit-animation: rotate 5s linear infinite;
}
However, when I move my cursor away from the div, it immediately returns to its original position without any gradual transition. This sudden change can be quite disruptive, especially during the middle of an ongoing animation. Is there a way to smoothly revert back to the original state? Although transitions are typically used for this purpose, they don't seem to integrate well with animations. I attempted to add -webkit-transition: all 2s; to the #square selector as shown above, but it had no effect.
For reference, you can view an example here: http://jsfiddle.net/93jeS/