html - 循环 "flash"动画3次，然后延迟5秒，再用Animate.css循环

Question

非常喜欢 Animate.css 的外观，只是尝试配置“flash”功能。

我添加了一个额外的类 (.promptflash)。

如何执行闪光灯3次，然后延迟5秒并重复循环3次，然后延迟..重复...

还尝试将初始 Flash 动画放慢一点，因为默认情况下它闪烁得非常快

Animate.CSS - List of features

.promptflash {
animation: 0.3s infinite;
animation-delay: 2s;
}

Answer 1

这里你有一个工作 jsfiddle为了那个原因。它没有 -webkit 和 -moz 前缀，只是为了向您展示如何做到这一点。

.flash {
  -webkit-animation-name: move;
  animation-name: move;
  animation-duration:6s;

}

@keyframes move{
  0% { opacity: 0;}
  5% { opacity: 1;}
  10% { opacity: 0;}
  15% { opacity: 1;}
  20% { opacity: 0;}
  25% { opacity: 1;}
 }