悬停时的 Webkit 关键帧 - 防止先前的动画

发布于 2024-12-11 01:55:36 字数 571 浏览 0 评论 0原文

我有一个元素，我有一组 @-webkit-keyframes 来制作动画。在页面加载时，这些关键帧运行，并且介绍看起来很棒。

接下来，我在悬停时有第二组 @-webkit-keyframes 并设置为重复，因此在悬停时，该元素具有循环动画。这也很有效。

然而，当我将鼠标从元素上移开时，第一组（介绍）关键帧将再次运行。我不希望它在第一次运行后运行。 CSS 有没有简单的方法来防止这种情况发生？

我所拥有的最小示例

#e { -webkit-animation: fadeIn 1s ease-out 0.5s; } /* Fades in on load, BUT gets called when mouse moves away as well */
#e:hover { -webkit-animation: pulse 1s ease-in-out 0s infinite alternate; } /* Works fine, pulses on hover */

另外，具有 1500+ 声誉的人可以编辑标签并添加 webkit-animation 标签吗？我不敢相信它还没有被创建......：\

原文

I have an element that I have a set of @-webkit-keyframes to animate in. On page load, these keyframes run, and the intro looks great.

Next, I have a second set of @-webkit-keyframes on hover and set to repeat, so on hover, that element has a looping animation. That also works great.

However, the instant I move the mouse away from the element, the first (intro) set of keyframes gets run again. I don't want it to run after it first runs. Is there an easy way to prevent this in CSS?

Minimal example of what I have

#e { -webkit-animation: fadeIn 1s ease-out 0.5s; } /* Fades in on load, BUT gets called when mouse moves away as well */
#e:hover { -webkit-animation: pulse 1s ease-in-out 0s infinite alternate; } /* Works fine, pulses on hover */

Also, can someone with 1500+ reputation edit the tags and add the webkit-animation tag? I can't believe it hasn't been created yet… :\

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

淡莣 2024-12-18 01:55:36

没有纯 CSS 方法可以完成您的需要。您可以将动画添加到父元素或包装器中，并分别为每个元素添加动画：

.wrapper {
    -webkit-animation: fadeIn .5s ease-out 0 1;
}
#e { 
    width: 100px;
    height: 100px;
    background-color: #000;
}
#e:hover { 
    -webkit-animation: pulse 100ms ease-in-out 0s infinite alternate; 
} 
@-webkit-keyframes fadeIn {
        0%   { opacity: 0; }
        100% { opacity: 0.5;}
}

@-webkit-keyframes pulse {
        0%   { background-color: #000; }
        100% { background-color: #c00; }
}

http://jsfiddle.net/3PuT2 /

There is no pure CSS way of accomplishing what you need. You can add the animation to a parent element or to a wrapper and animate each element separately:

.wrapper {
    -webkit-animation: fadeIn .5s ease-out 0 1;
}
#e { 
    width: 100px;
    height: 100px;
    background-color: #000;
}
#e:hover { 
    -webkit-animation: pulse 100ms ease-in-out 0s infinite alternate; 
} 
@-webkit-keyframes fadeIn {
        0%   { opacity: 0; }
        100% { opacity: 0.5;}
}

@-webkit-keyframes pulse {
        0%   { background-color: #000; }
        100% { background-color: #c00; }
}

http://jsfiddle.net/3PuT2/

回复收藏 0 原文

~没有更多了~