如何使用 css 重新闪烁 div？ [复制]

Question

我知道我们可以使用下面的 css 让 div 闪烁指定的次数：

html:

<div class="blink">blinking text</div>

css:

@-webkit-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
@-moz-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
.blink {
-webkit-animation: blinker 1s 5;
-moz-animation: blinker 1s 5;
animation: blinker 1s 5;
}

通过使用css方式，页面加载后div会闪烁，无需我们调用任何js函数。 但是，如果我想在用户按下按钮后重新闪烁 div 怎么办？ “onclick”没有可调用的函数。

<button onclick="">BLINK AGAIN!</button>

知道怎么做吗？

JSFIDDLE

Answer 1

您需要删除类 'blink' 然后重新添加它，以重新启动 CSS 动画

您需要使用setTimeout，以便在将类从其中删除之前不会将其添加到其中

$("#blinkagain").click(function() {
    var $el = $(".blink");
    $el.removeClass("blink");
    setTimeout(function() {$el.addClass("blink");}, 500);
});

@-webkit-keyframes blinker {
  0% {
    opacity: 1.0;
  }
  50% {
    opacity: 0.0;
  }
  100% {
    opacity: 1.0;
  }
}
@-moz-keyframes blinker {
  0% {
    opacity: 1.0;
  }
  50% {
    opacity: 0.0;
  }
  100% {
    opacity: 1.0;
  }
}
.blink {
  -webkit-animation: blinker 1s 5;
  -moz-animation: blinker 1s 5;
  animation: blinker 1s 5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blink">blinking text</div>
<button id="blinkagain">BLINK AGAIN!</button>