只运行一次 CSS3动画(在页面加载时)

我正在制作一个简单的由 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 来解决这个问题吗？

172476 次浏览
小开

如果我理解正确，你想发挥的动画在 A只有一次，你必须添加

animation-iteration-count: 1

a的风格。

小开
最佳答案

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

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

您必须使用 JavaScript。

小开

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

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

超文本标记语言。

<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;
}
小开

我刚刚在 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;
}
小开

下面的代码没有 "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>
小开

所以我找到了解决办法: 在悬停动画中这样做:

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

解决这个问题的一个简单方法是在 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秒足以确保动画不会重新启动。一个正常人在画面上停留不会超过几秒钟。

小开

用就是了

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

仅在 CSS 中是不可能的，您需要一个 javascript 解决方案。正如这里已经解释过的，animation-iteration-count属性在 a: hover 上重置。最好的办法就是用 javascript 来完成所有的事情，但是为了代码的自定义方便起见，你可能需要保留用 CSS 来完成某些事情的可能性。

因此，在 JS 中:

// adding a class to the html tag, during the animation time
const startPage = (() => {
const html = document.documentElement,
s = 'start'
html.classList.add(s)
window.addEventListener('load', function() {
setTimeout(() => {
html.classList.remove(s)
}, 1500) // the time must be at least equal to the duration of the CSS animation (personally I put a little more).
})
})()

至于 CSS:

/* the presence of the `.start` class conditions the animation */
.start .leaflet-marker-pane {
animation: animDrop 1s ease;
}

提交答案