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

Answer 2

只需覆盖-webkit-animation-name至none

即可

在:hover css部分内写：

-webkit-animation-name: none;

FIDDLE

Answer 3

类似以下jQuery代码段应该可以解决这个问题：

$(".blink").hover(function(){
  if ($(this).is(':animated')) {
      $(this).css('opacity', '1');
      $(this).css('background', 'red');
      $(this).css("-webkit-animation", "none");
      $(this).css("-moz-animation", "none");
      $(this).css("-ms-animation", "none");
      $(this).css("-o-animation", "none");
      $(this).css("animation", "none");
  }
});

上述代码可以重写为：

$(".blink").hover(function(){
  if ($(this).is(':animated')) {
      $(this).css({
          'opacity' : '1',
          'background' : 'red',
          '-webkit-animation' : 'none',
          '-moz-animation' : 'none',
          '-ms-animation' : 'none',
          '-o-animation' : 'none',
          'animation' : 'none'
      });
  }
});

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

3 个答案: