Question

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

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

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

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

1 个答案: