2

I have created a snippet of looped animation of a image shaking effect.But there is slight blinking of image after every loop stops.It decrease the originality of animation.Please help me to solve this issue.

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>
Navaneeth Venugopal
  • 364
  • 5
  • 14

1 Answers1

2

the Wow.js library seems to cycle css visibility when it completes an animation. To combat this add the following to your css

JSFIDDLE

.course-img2{
    visibility:visible !important;
}
haxxxton
  • 6,422
  • 3
  • 27
  • 57