Algunas animaciones pueden mover el elemento de tal manera que si el usuario no lo sigue perfectamente con el mouse, la animación nunca se completará. ¿Cómo me aseguro de que la animación se complete una vez que el usuario se desplace?
Si no están flotando en el momento en que se completa la animación, me gustaría deshacer la animación y volver al estado de no flotar, pero si no está completo, termínelo primero.
¿Hay alguna forma de que esto sea posible sin javascript?
No conozco una forma de hacer esto de una manera limpia en general sin JavaScript, pero a menudo al menos puede mantener el objetivo de desplazamiento (invisible) en un lugar mientras algún otro elemento se mueve como parte de la animación.
@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>