CSS悬停状态-循环效应

Question

当在txt上盘旋时，此代码提供了一个很好的效果。这种颤抖看起来很酷。但只有在鼠标缓慢移动时才会发生这种情况，如果鼠标稳定，则悬停的样式就会接管。

因此，是否有任何方法来保持抖动(或快速切换，因为缺少文字)，即使鼠标是稳定的，也许至少5倍b/w的悬停风格和非悬停风格，使用CSS3。我知道使用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/

-最新情况

或者就这件事而言，是一种效应，当它悬停时，会将b/w转换为非悬停式和悬停式，以达到设定的间隔或数字。

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