只运行一次 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 Poker 的情况下解决这个问题？

Answer 1

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

animation-iteration-count: 1

a 的样式。

Answer 2

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

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

您必须使用 JavaScript。

Answer 3

这可以通过一些额外的开销来完成。

只需将链接包装在一个 div 中，然后将动画分开。

html ..

<div class="animateOnce">
    <a class="animateOnHover">me!</a>
</div>

.. 和 css ..

.animateOnce {
    animation: splash 1s normal forwards ease-in-out;
}

.animateOnHover:hover {
    animation: hover 1s infinite alternate ease-in-out;
}

Answer 4

我刚刚在 Firefox 和 Chrome 上运行了这个。您只需根据需要添加/删除以下类。

.animateOnce {
  -webkit-animation: NAME-OF-YOUR-ANIMATION 0.5s normal forwards; 
  -moz-animation:    NAME-OF-YOUR-ANIMATION 0.5s normal forwards;
  -o-animation:      NAME-OF-YOUR-ANIMATION 0.5s normal forwards;
}

Answer 5

以下不带"iteration-count: 1" 的代码导致所有订单项在输入后都在跳动，直到最后一项加载，即使没有使用'pulse。

<li class="animated slideInLeft delay-1s animation-iteration-count: 1"><i class="fa fa-credit-card" aria-hidden="true"></i> 1111</li>


<li class="animated slideInRight delay-1-5s animation-iteration-count: 1"><i class="fa fa-university" aria-hidden="true"></i> 222222</li>

<li class="animated lightSpeedIn delay-2s animation-iteration-count: 1"><i class="fa fa-industry" aria-hidden="true"></i> aaaaaa</li>

<li class="animated slideInLeft delay-2-5s animation-iteration-count: 1"><i class="fa fa-key" aria-hidden="true"></i> bbbbb</li>

<li class="animated slideInRight delay-3s animation-iteration-count: 1"><i class="fa fa-thumbs-up" aria-hidden="true"></i> ccccc</li>

Answer 6

所以我刚刚找到了一个解决方案： 在悬停动画中这样做：

animation: hover 1s infinite alternate ease-in-out,splash 1;

Answer 7

解决此问题的一个简单方法是在 a:hover 中的动画中添加更多秒数，并利用 @keyframes 中的过渡效果

a:hover {
        animation: hover 200s infinite alternate ease-in-out;
    }

只需使用百分比让@keyframes 的进度更快。

@keyframes hover {
    0% {
        transform: scale(1, 1);
    }
    1% {
        transform: scale(1.1, 1.1);
    }
    100% {
        transform: scale(1.1, 1.1);
    }
}

动画中的 200 秒或 300 秒足以确保动画不会重新启动。一个普通人在图像上悬停的时间不会超过几秒钟。

Answer 8

随便用

animation: hover 1s ease-in-out forwards;