67

我正在制作一个由 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 有没有办法解决这个问题？

4

8 回答 8

40

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

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

您必须使用 JavaScript。

于 2012-03-16T18:40:38.687 回答
34

如果我理解正确，您只想在A必须添加的情况下播放动画

animation-iteration-count: 1

为风格a。

于 2011-12-13T05:17:03.723 回答
25

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

只需将链接包装在 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;
}
于 2013-06-12T02:19:02.177 回答
23

我刚刚在 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;
}
于 2014-07-30T07:31:12.683 回答
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 秒足以确保动画不会重新启动。一个普通人在图像上悬停的时间不会超过几秒钟。

于 2021-01-18T21:27:33.130 回答
0

只需使用

animation: hover 1s ease-in-out forwards;
于 2022-01-08T06:15:35.963 回答
-1

以下代码没有"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>
于 2018-11-28T01:53:15.467 回答
-1

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

animation: hover 1s infinite alternate ease-in-out,splash 1;
于 2020-11-08T18:33:00.797 回答