CSS 只运行一次 CSS3 动画（在页面加载时）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8482820/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Run CSS3 animation only once (at page loading)
提问by buschtoens
I'm making a simple landing page driven by CSS3. To make it look awesome there's an <a>plopping up:
我正在制作一个由 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);
}
}
And to make it even more awesome I added a hover animation:
为了让它更棒，我添加了一个悬停动画：
@keyframes hover {
from {
transform: scale(1, 1);
}
to {
transform: scale(1.1, 1.1);
}
}
But there comes the problem! I assigned the animations like this:
但是问题来了！我分配了这样的动画：
a {
/* Some basic styling here */
animation: splash 1s normal forwards ease-in-out;
}
a:hover {
animation: hover 1s infinite alternate ease-in-out;
}
Everything works just fine: The <a>splashes into the users face and has a nice vibration when he hovers it. Bit as soon as the user blurs the <a>the smooth stuff ends abruptly and the <a>repeats the splash-animation. (Which is logical to me, but I don't want it to)
Is there some way to solve this problem without some JavaScript Class Jiggery Pokery?
一切都很好：<a>飞溅到用户的脸上，当他悬停时会有很好的振动。一旦用户模糊，<a>平滑的东西就会突然结束并<a>重复splash-animation。（这对我来说是合乎逻辑的，但我不想这样做）有没有办法在没有 JavaScript Class Jiggery Pokery 的情况下解决这个问题？
采纳答案by buschtoens
After hours of googling: No, it's not possible without JavaScript. The animation-iteration-count: 1;is internally saved in the animationshothand attribute, which gets resetted and overwrittenon :hover. When we blur the <a>and release the :hoverthe old class reappliesand therefore again resetsthe animationattribute.
经过数小时的谷歌搜索：不，没有 JavaScript 是不可能的。该animation-iteration-count: 1;内部保存在animationshothand属性，它被重置了和覆盖上:hover。当我们模糊<a>并释放:hover旧类时，会重新应用并因此再次重置该animation属性。
There sadly is no way to save a certain attribute states across element states.
遗憾的是，无法跨元素状态保存某个属性状态。
You'll have to use JavaScript.
您将不得不使用 JavaScript。
回答by Strelok
If I understand correctly that you want to play the animation on Aonly once youu have to add
如果我理解正确，您只想播放动画A一次，您必须添加
animation-iteration-count: 1
to the style for the a.
的样式a。
回答by Butsuri
It can be done with a little bit of extra overhead.
它可以通过一些额外的开销来完成。
Simply wrap your link in a div, and separate the animation.
只需将您的链接包装在一个 div 中，然后将动画分开。
the html ..
html ..
<div class="animateOnce">
<a class="animateOnHover">me!</a>
</div>
.. and the css ..
.. 和 css ..
.animateOnce {
animation: splash 1s normal forwards ease-in-out;
}
.animateOnHover:hover {
animation: hover 1s infinite alternate ease-in-out;
}
回答by Ricardus
I just got this working on Firefox and Chrome. You just add/remove the below class accordingly to your needs.
我刚刚在 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;
}
回答by happyjjd
The following code without "iteration-count: 1"was resulting in all line items pulsing after entering, until the last item loaded, even though 'pulse was not being used.
下面的代码没有"iteration-count: 1"导致所有行项目在输入后产生脉冲，直到加载最后一个项目，即使没有使用“脉冲”。
<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>
回答by Nagnath Mungade
For above query apply below css for a
对于上面的查询，在 css 下面应用一个
animation-iteration-count: 1
