Question

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

＆＃13;

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();

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

Wow.js库似乎在完成动画时循环css visibility。要解决此问题，请在css中添加以下内容

<强> JSFIDDLE

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

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

1 个答案: