Запускать анимацию CSS3 только один раз (при загрузке страницы) ⇐ CSS

[Anonymous]

Я создаю простую целевую страницу на основе 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-класса Jiggery Pokery?

Подробнее здесь: https://stackoverflow.com/questions/848 ... ge-loading