Animer des impulsions effet à l'aide de CSS3 Transformer Échelle et jQuery

Je suis d'essayer de créer une série d'animation d'un élément à l'aide de CSS3 est transform: scale(x,y). Je veux de l'objet à l'infini de l'impulsion (qui deviennent légèrement plus grande) à moins qu'il planait au-dessus - à quel point l'animation en cours et devrait se terminer (c'est à dire revenir à sa taille d'origine) et cesser d'impulsions jusqu'à ce qu'il n'est plus d'être survolé. Je ne peux même pas sembler obtenir de jQuery .animate() de travail, cependant.

function pulse() {
  $('#pulsate').animate({
    transition: 'all 1s ease-in-out',
    transform:  'scale(1.05,1.05)'
  }, 1500, function() {
    $('#pulsate').animate({
      transition: 'all 1s ease-in-out',
      transform:  'scale(1,1)'
      }, 1500, function() {
        pulse();
    });
  });
}
pulse();

Serait à l'aide d' .addClass et .removeClass être mieux ici? .removeClass ferait l'affaire pour arrêter l'animation sur .hover(), mais je n'en suis pas sûr de la mise en œuvre globale.

Tu veux dire quelque chose comme ceci: jsfiddle.net/g4zC7 ? Chrome n'
En fait, oui, exactement comme ça. Sauf que je voudrais que cela fonctionne dans d'autres navigateurs (au moins Firefox). Très impressionnant que c'est tout le CSS, cependant.
Essayez ceci: jsfiddle.net/rooseve/g4zC7/2 . Je l'ai tester Firefox 26 et IE 11.
C'est fou génial, et merci pour l'enseignement de moi, c'est possible avec de la pure CSS. Le présenter comme une réponse et je vais l'accepter. Fait, j'ai fini par aller avec jQuery.transit: github.com/rstacruz/jquery.transit

OriginalL'auteur daveycroqet | 2014-01-03

  1. 16

    Essayez d'utiliser Les animations CSS.

    @keyframes pulse {
    0% {
     transform: scale(1, 1);
    }

    50% {
     transform: scale(1.1, 1.1);
    }

    100% {
    transform: scale(1, 1);
    }
}

#test {
    animation: pulse 1s linear infinite;
}

    http://jsfiddle.net/rooseve/g4zC7/2/

    OriginalL'auteur Andrew