Переход CSS в исходное состояние после нажатия кнопки мыши
Обновлено: Это не то же самое, что и этот пост, Как отменить анимацию при наведении курсора мыши после наведения. Разница в том, что в этом случае важно состояние перехода (насколько он продвинулся), в отличие от вышеупомянутого сообщения, которое полностью игнорирует его.
TL; DR: Как анимировать / вернуть элемент в исходное состояние после окончания анимации?
Привет,
Я пытаюсь сделать анимированные панели так, чтобы они "плавали" при наведении курсора. Моя проблема в том, что мышь покидает панель, вместо того, чтобы вернуться в исходное состояние, она мгновенно возвращается обратно.
Сильно упрощенную версию этого можно найти во фрагменте, доступном ниже.
body {
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
}
div {
width: 50px;
height: 50px;
background-color: red;
}
div:hover {
animation: float 2s infinite ease;
}
@keyframes float {
0%, 100% {
transform: none;
}
50% {
transform: translateY(-20px);
}
}<html>
<head>
<title>animate to orignal position</title>
</head>
<body>
<div id='box'></div>
</body>
</html>Как вы можете видеть, его перемещение вызывает плавную анимацию, напоминающую плавающее движение, однако оно резко прерывается, когда мышь покидает поле, и анимация останавливается.
Итак, мой вопрос: есть ли способ разрешить ящику вернуться в исходное состояние, желательно без использования JavaScript (хотя все предложения приветствуются).
(На этот вопрос, вероятно, был дан ответ где-то в Интернете, и если это так, то мне искренне жаль, но мне не удалось найти правильное решение моей проблемы. Пожалуйста, добавьте дубликат, если вы найдете подходящее решение.)
Спасибо.
Возможный дубликат Как отменить анимацию при наведении курсора мыши после наведения
@CodeGator Спасибо за добавление. Однако см. Редактировать 1.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вам нужно будет использовать переходы JavaScript и CSS:
var box = document.getElementById('box')
var timer
box.addEventListener('mouseenter', function () {
box.classList.add('up')
timer = setInterval(function () {
box.classList.toggle('up')
}, 1000)
})
box.addEventListener('mouseleave', function () {
clearInterval(timer)
box.classList.remove('up')
})body {
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
}
div {
width: 50px;
height: 50px;
background-color: red;
transition: transform 1s ease;
}
div.up {
transform: translateY(-20px);
}<html>
<head>
<title>animate to orignal position</title>
</head>
<body>
<div id='box'></div>
</body>
</html>
TL: DR нет, вы не можете использовать CSS ... все, что вы можете сделать, это найти обходной путь для вашего конкретного случая, и решение наверняка будет включать использование простого перехода вместо анимации, но нам нужно найти, как это непросто для бесконечной анимации