我正在制作一个由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>重复飞溅动画。 (这是逻辑上对我，但我不想要它)
有没有办法解决这个问题，没有一些JavaScript Class Jiggery Pokery？
