Some animations may move the element in a way that if the user doesn't follow it with their mouse perfectly, the animation will never complete. How do I ensure the animation completes once the user hovers at all?
If they aren't hovering by the time the animation completes, I would like it to undo the animation and go back to non-hover state, but if it isn't complete, finish it first.
Is there any way this is possible without javascript?
I'm not aware of a way to do this in a clean way in general without JavaScript, but you can often at least keep the (invisible) hover target in one place while some other element moves as part of the animation.
@keyframes orbit {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
.circle {
display: flex;
align-items: center;
justify-content: center;
font-family: sans-serif;
color: white;
width: 120px;
height: 120px;
border-radius: 9999px;
transform-origin: 200% 50%;
}
body > .circle {
margin: 120px;
}
.must-follow {
background-color: green;
}
.must-follow:hover {
animation: orbit 20s ease;
}
.can-follow-inner {
background-color: blue;
}
.can-follow:hover .can-follow-inner {
animation: orbit 20s ease;
}
.no-follow {
position: relative;
}
.no-follow-target {
position: absolute;
}
.no-follow-after {
background-color: red;
pointer-events: none;
}
.no-follow-target:hover + .no-follow-after {
animation: orbit 20s ease;
}<div class="circle must-follow">follow me</div>
<div class="circle can-follow">
<div class="circle can-follow-inner">follow or don’t</div>
</div>
<div class="circle no-follow">
<div class="circle no-follow-target"></div>
<div class="circle no-follow-after">don’t follow</div>
</div>