使用CSS3 Transform Scale和jQuery动画脉冲效果

Question

我正在尝试使用CSS3创建一个元素的脉冲动画transform: scale(x,y).我希望物体能够无限地脉动(变得略大),除非它悬停在 - 此时当前动画应该完成(即返回其原始大小)并停止脉动,直到它不再悬停在上面..animate()然而,我似乎无法让jQuery 工作.

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();

会在这里使用.addClass并且.removeClass更好吗？ .removeClass会做停止动画的技巧.hover(),但我不确定整体实现.

Answer 1

尝试使用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/