1

Pessoal tenho uma img com 2 animações, mas quero que apenas uma seja continua, que aplique a animação varias vezes, assim que iniciar a animação é aplicado o fadeIn com 1.5s de delay e de 3s em 3s aplica o pulse sem parar. Nos parametros que conheço vai aplicar nas duas animações, mas quero que apenas o pulse seja infinito e que a animação ocorra de 3 em 3 segundos.

<img class="img-responsive logo wow fadeIn pulse" src="imagens/logo.png" data-wow-delay="">

1 Resposta 1

-1

Pela documentação do Animate no GitHub, você pode tentar o seguinte:

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

OBS: substitua "vendor" com o prefixo aplicável (webkit, moz, etc (por questões de compatibilidade, sugiro fazer com todos))

A parte do fadeIn, eu usaria o jQuery pra, após o carregamento do documento e a execução do fadeIn a classe seja removida:

<script type="text/javascript">
    $(document).ready(function(){
         setTimeout(function(){
           $("#imagem1").removeClass("fadeIn");
         }, 2000);
    });
</script>

Testa e vê se funciona, por favor.

============================EDIT 1==================================

Pode ser que o Animate não permita (ou falhe ao tentar) executar duas animações simultaneamente sobre o mesmo elemento (não tenho certeza, nunca testei e não tenho como testar agora rs), porém, pode ser que isso aqui resolva:

<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>
3
  • Deu certinho sua dica, mas só uma animação esta funcionando, eu coloquei assim <img id="logo-anime" class="img-responsive logo wow fadeIn pulse" src="imagens/logo.png" data-wow-delay="1.5s"> mas só a primeira funciona, a fadein a pulse nao funciona nem uma vez, parece que só a primeira animação que coloca funciona, como faço pra as duas funcionarem? 21/09/2017 às 19:25
  • não sei pq mas não funcionou, não retirou a classe e adicionou outra. Mas se eu deixo o elemento sem classe nenhuma e coloco no js pra só addClass ai funciona e add a classe, mas tirar uma e colocar outra não funciona, a imagem fica repetindo a classe fadeIn 22/09/2017 às 14:40
  • Resolvi por acaso resolvendo outro problema, é só vc criar uma div e colocar nela o efeito que quer fazer uma vez só e dentro dessa div coloca o objeto que vc quer que tenha a animação continua, aí vai dar certo o que eu queria fazer, mas agora já mudei de idéia e não preciso mais, mas fica registrado aqui a solução pra outros que precisem. 29/09/2017 às 20:34

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .