如何在悬停时立即停止 CSS 动画？

Question

我做了一个由元素淡入淡出组成的 CSS 动画。
我在这里设置了一个小提琴：http : //jsfiddle.net/BX78D/（仅限 webkit）

@-webkit-keyframes blink {
    0% {opacity:1;}
    50% {opacity:0;}
    100% {opacity:1;}
}

那部分很好，但这是我需要帮助的部分：当用户将鼠标悬停在该元素上时，我需要停止动画并将元素立即设置回 100% 不透明度（使用新的背景颜色）。现在，我只能让它在继续当前不透明度动画的同时更改背景颜色。有谁知道如何做到这一点？

解决方案必须是仅 CSS 的解决方案。由于客户端规则，我不能为此使用 JS。如果不能只用 CSS 来完成，我将不得不废弃整个效果。

Answer 1

因为您正在制作动画opactiy，所以当将鼠标悬停在元素上时，您需要将其设置回 100% 或 1，并确保@keyframes未运行。

.blink:hover {
    background:red; 
    opacity: 1;
    -webkit-animation-name: none;
    /* should be set to 100% opacity as soon as the mouse enters the box; when the mouse exits the box, the original animation should resume. */
}

JSFiddle