Personally I have an img with 2 animations, but I want only one to be continuous, to apply the animation several times, once the animation starts, fadeIn is applied with 1.5s of delay and 3s in 3s applies the pulse without stopping . In the parameters I know will apply in both animations, but I want only the pulse to be infinite and that the animation occurs every 3 seconds.
<img class="img-responsive logo wow fadeIn pulse" src="imagens/logo.png" data-wow-delay="">
From the Animate documentation on GitHub , you can try the following:
<img id="imagem1" class="img-responsive logo fadeIn pulse" src="imagens/logo.png"/>
<style>
#imagem1{
-vendor-animation-duration: 2s;
-vendor-animation-delay: 3s;
-vendor-animation-iteration-count: infinite;
}
</style>
NOTE: replace "vendor" with the applicable prefix (webkit, moz, etc. (for compatibility reasons, I suggest doing with all))
The part of fadeIn, I would use jQuery to, after loading the document and the fadeIn execution the class be removed:
<script type="text/javascript">
$(document).ready(function(){
setTimeout(function(){
$("#imagem1").removeClass("fadeIn");
}, 2000);
});
</script>
Test and see if it works, please.
====================== EDIT 1 ============== ====================
It may be that Animate does not allow (or fails to try) to execute two animations simultaneously on the same element (I'm not sure, I've never tried it and I can not test rs now) / p>
<img id="imagem1" class="img-responsive logo fadeIn" src="imagens/logo.png"/>
<style>
#imagem1{
-vendor-animation-duration: 2s;
-vendor-animation-delay: 3s;
-vendor-animation-iteration-count: infinite;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
setTimeout(function(){
$("#imagem1").removeClass("fadeIn");
$("#imagem1").addClass("pulse");
}, 2000);
});
</script>