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

Question

我有一个元素，我有一组 @-webkit-keyframes 可以在其中设置动画。在页面加载时，这些关键帧会运行，而且介绍看起来很棒。

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

但是，当我将鼠标从元素上移开时，第一组(介绍)关键帧会再次运行。我不希望它在第一次运行后运行。有没有一种简单的方法可以在 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 标签吗？我不敢相信它还没有被创建……:\

Answer 1

没有纯 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/