Css Animation Flashesh for a second before it starts on mobile devices

Question

I'm using animate.css and animate-plus.js to animate elements on the page when scrolling, the problem is that on mobile devices element flashes for a fraction of second before it starts and it ruins the effect.I should mention that it works fine on desktops

Here is my code :

<div class="col-md-12 animate-plus animated hidden-load " data-animations="fadeInLeft"  data-animation-when-visible="true"> 
<img src="http://placehold.it/350x150">
</div>

I've tried some solution forom other user on stackoverflow who had similar problem here I've used :

.hidden-load {visibility: hidden; opacity: 0}
.hidden-load.animated {visibility: visible; opacity: 1}

Answer 1

You could try something like this below:

$('#XXX').css({"opacity":0}).delay(200).css({"opacity":1});