我正在制作一个由CSS3驱动的简单目标网页。为了使它看起来很棒，有一个<a>隆重的表演：

@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;
}

一切都很好：<a>飞溅到用户脸上，当他徘徊时有很好的振动。用户模糊后，立即<a>填充，平滑内容突然结束并<a>重复splash-animation。（这对我来说是合乎逻辑的，但我不希望这样做）没有某种JavaScript类Jiggery
Pokery，有什么方法可以解决此问题？