How do I ensure a CSS animation completes even if the user stops hovering?-CodePudding

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?

CodePudding user response：

Did you tried to add (forward) in the end of the animation ? I don't know if you get what i mean let me give you an example : animation : 1s .6s ease-out forward

CodePudding user response：

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>