CSS悬停状态-循环效果

Question

当鼠标悬停在文本上时，这段代码的效果很好。摇晃看起来很酷。但它只在缓慢移动鼠标时发生，如果鼠标是稳定的，则采用悬停样式。

那么，在CSS3中，即使鼠标是稳定的，也许至少5次b/w悬停样式和非悬停样式时，是否有任何方法可以保留抖动(或快速切换，因为缺乏文字)。我知道用JS这是可能的，但我想知道CSS的方法，虽然小JS不会伤害。

HTML

<div id="intro"><h1>Lorem Ipsum<br>dolor</h1></div>

CSS

#intro {
      font-family: 'Pacifico', cursive;
      color: #fff;
      text-align: center;}
#intro:hover {
      font-family: 'Lobster', cursive;}

http://jsfiddle.net/h9306qq5/

——更新

或者，当鼠标悬停时，在设定的间隔或数字内，从非悬停样式过渡到悬停样式的效果

Answer 1

您可以通过简单地使用jquery实现您的目标。它应该是这样的:

$('#intro').on('hover', function() {
  var that = $(this);
  that.css('font-family', "'Pacifico', cursive;");
}, function() {
  var that = $(this);
  setTimeout(function() { 
    that.css('font-family', "'Lobster', cursive;");
  }, 500);
});

可以通过调整超时时间来增加切换之间的时间。

这里是一个没有包含字体的小提琴，让它工作:JSFiddle