Я делаю простую целевую страницу на основе CSS3. Чтобы это выглядело потрясающе, добавлено
:
@keyframes splash {
from {
opacity: 0;
transform: scale(0, 0);
}
50% {
opacity: 1;
transform: scale(1.1, 1.1);
}
to {
transform: scale(1, 1);
}
}
И чтобы сделать его еще более крутым, я добавил анимацию наведения:
@keyframes hover {
from {
transform: scale(1, 1);
}
to {
transform: scale(1.1, 1.1);
}
}
Но возникает проблема! Я назначил анимации так:
a {
/* Some basic styling here */
animation: splash 1s normal forwards ease-in-out;
}
a:hover {
animation: hover 1s infinite alternate ease-in-out;
}
Все работает отлично:
всплывает на лицо пользователя и имеет приятную вибрацию, когда он наводит на него курсор. Бит, как только пользователь размывает
, плавное изображение резко заканчивается, и
повторяет всплеск
-анимацию. (Что для меня логично, но я не хочу)
Есть ли способ решить эту проблему без использования JavaScript Class Jiggery Pokery?