CSS3 spin keyframes
Hello Experts,
Yet to learn CSS transform :-)
I have a circle image which I am spinning (360deg) on mouse-over.
When the user mouse-out I would like the circle to slowly and gradually roll back from the point it currently is and stop. Is it possible with CSS?
Yet to learn CSS transform :-)
I have a circle image which I am spinning (360deg) on mouse-over.
When the user mouse-out I would like the circle to slowly and gradually roll back from the point it currently is and stop. Is it possible with CSS?
@keyframes spin {
0% {
transform:rotate(0deg);
}
100% {
transform:rotate(360deg);
}
}
.spin {
animation-name: spin;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}$(document).ready(function() {
$(".playbtn").hover(function() {
$(this).addClass("spin");
}, function() {
$(this).removeClass("spin");
});
});ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thank you guys. Sorry I was away to respond.
Two weeks is a little slow but many people have taken longer to respond.
To make an animation slow to a stop you could try using "ease-out" as the timing instead of "linear" in addition to setting the iteration-count to 1. You might want to increase the duration for that as well.
Otherwise, JavaScript using requestAnimationFrame() would be needed.
To make an animation slow to a stop you could try using "ease-out" as the timing instead of "linear" in addition to setting the iteration-count to 1. You might want to increase the duration for that as well.
Otherwise, JavaScript using requestAnimationFrame() would be needed.
ASKER
It does not look so good :-(
Maybe only to make it stop slowly and not immediately when the user mouse-out?
So not backwards just simply to stop slowly?