循环动画停止时如何停止图像轻微闪烁？

Question

我创建了一个sn-p循环动画的图像抖动效果。但是每次循环停止后图像都会轻微闪烁。这降低了动画的原创性。请帮我解决这个问题。

function afterReveal (el) {
	//event listener when the animation finishes
	el.addEventListener('animationend', function () {
    $("#test").attr("data-wow-delay","6s");
    new WOW().init();
	});
}

new WOW({ callback: afterReveal }).init();

.course-img2 img{
  width:30%;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
  <div id="test" data-wow-delay="300ms" data-wow-iteration="2" data-wow-duration="0.60s" class="wow shake course-img2"> <img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg" alt="Logo"> </div>

Answer 1

Wow.js 库在完成动画时似乎循环 css visibility。为了解决这个问题，将以下内容添加到您的 CSS 中

JSFIDDLE

.course-img2{
    visibility:visible !important;
}