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

我有一个元素，我有一套@ -webkit-keyframes来进行动画处理。在页面加载时，这些关键帧运行，并且介绍看起来很棒。关于悬停的Webkit关键帧 - 防止以前的动画

接下来，我有第二组关于悬停的@ -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的动画标签？我不能相信它还没有创建...：\

来源

2011-10-19 Justin Mrkva

你去那里。这也是一个相当普遍的话题。 – Blender

尝试使用转换而不是动画。 – albert

没有完成你所需要的纯粹的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/

来源

2011-10-20 04:47:58 Duopixel

谢谢。有点令人失望，纯CSS无法实现，但效果很好。有一点需要注意的是，我需要使用'-webkit-transform-style：preserve-3d;'来使它看起来正确（我使用3d变换和透视图）。 –

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

回答

相关问题