When using a simple rotation keyframe animation on hover, the cube starts fine but suddenly stops and jumps back to its initial state when the pointer is moved out. Is there a way to add easing time or another solution in CSS to make the stopping smoother when the pointer is removed?
@keyframes rotating {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#cube:hover {
animation: rotating 12s linear infinite;
}
#cube{
width: 100px;
height: 100px;
background:red;
transition-duration: 3s; /*Doesn't work*/
}
#cubeb {
width: 100px;
height: 100px;
background:red;
transition: transform 12s linear;
}
#cubeb:hover {
transform: rotate(360deg);
}<div id="cube">Jump When hover ends</div>
<br/>
<div id="cubeb">No Jump but does not continuously rotate on hover</div>