I have some animations using animate.css and wow.js , I put some delay through wow, but as soon as the site loads the images are already shown and then apply the animation, I do not want them to appear before the animation, if it has delay of 10s I want the image that this effect does not appear and only appears when doing the animation, I believe it would have to be that way for wow, but how do I make a code so that the image stays with opacity 0 and then with the animation it passes to 1, or something like that?
Image is visible before the Animate.css and wow.js load
-2
asked by anonymous 29.09.2017 / 22:15
1 answer
1
As you have not posted the code, you have no way of knowing where you went wrong, so I risked you to kick some hypotheses:
You forgot the new WOW (). init ();
The new WOW().init(); should go to the bottom of the page, after all, see how it worked correctly:
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<hr>
<img
class="wow fadeIn"
data-wow-duration="2s"
data-wow-delay="2s"
src="https://i.stack.imgur.com/YCSmc.jpg?s=328&g=1">
<script>
new WOW().init();
</script>Conflict with other CSS like Bootstrap
It may be that the .img-response or .logo class is affecting opacity: I can not say, but in any case try to remove them temporarily (this I mentioned as an example, maybe even a CSS that is not a class is affecting)
Download time
It may be that for some reason that just by looking at your HTML to know, you have done CSS without the render lock, what you can try to use to circumvent this would simply be to use the style tag within head with this:
<!DOCTYPE html>
<html>
<head>
...
<style>
.wow {
opacity: 0;
}
</style>
</head>
<body>
...
The
...are only illustrative, to say that there is more code there
In this way all elements with class wow will start forced with opacity: 0
02.10.2017 / 22:49