只运行一次 CSS3 动画（在页面加载时）

Question

我正在制作一个由 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 动画。 （这对我来说是合乎逻辑的，但我不希望这样）没有一些 JavaScript 类 Jiggery Pokery 有没有办法解决这个问题？

原文由 buschtoens 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

经过数小时的谷歌搜索：不，没有 JavaScript 是不可能的。 animation-iteration-count: 1; 内部保存在 animation shothand 属性中，该属性在 :hover 上被 _重置和覆盖_。当我们模糊 <a> 并释放 :hover 旧类 重新应用 并因此再次 重置 animation 属性。

遗憾的是，没有办法跨元素状态保存某个属性状态。

您必须使用 JavaScript。

原文由 buschtoens 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果我理解正确，您想在 A 上播放动画，只需添加一次

animation-iteration-count: 1

样式为 a 。

原文由 Strelok 发布，翻译遵循 CC BY-SA 4.0 许可协议