Я создал простую анимацию отскока, которую я применяю к состоянию :hover
элемента:
@keyframes bounce {
0% {
top: 0;
animation-timing-function: ease-out;
}
17% {
top: 15px;
animation-timing-function: ease-in;
}
34% {
top: 0;
animation-timing-function: ease-out;
}
51% {
top: 8px;
animation-timing-function: ease-in;
}
68% {
top: 0px;
animation-timing-function: ease-out;
}
85% {
top: 3px;
animation-timing-function: ease-in;
}
100% {
top: 0;
}
}
.box:hover {
animation: bounce 1s;
}
Анимация отлично работает, за исключением того, что при удалении курсора из элемента он резко останавливается. Есть ли способ заставить его продолжить заданное число итераций, даже если мышь вышла? В принципе, я ищу здесь анимацию, вызванную состоянием :hover
. Я не ищет решение javascript. Я вообще не видел этого в спецификации, но, может быть, есть очевидное решение, которое я пропустил здесь?
Здесь есть скрипка для игры с: http://jsfiddle.net/dwick/vFtfF/