Javascript 使用CSS3变换比例和jQuery设置脉冲效果动画

我正在尝试使用CSS3的

变换：缩放（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（）

上停止动画，但我不确定整体实现。

尝试使用

@-webkit关键帧脉冲{
0% {
-webkit变换：比例（1,1）；
}
50% {
-webkit转换：规模（1.1,1.1）；
}
100% {
-webkit变换：比例（1,1）；
};
}
@关键帧脉冲{
0% {
变换：比例（1,1）；
}
50% {
变换：比例（1.1,1.1）；
}
100% {
变换：比例（1,1）；
};
}
#试验{
背景：红色；
宽度：20px；
高度：20px；
-webkit动画：脉冲1s线性无限；
动画：脉冲1s线性无限；
}
#测试：悬停{
-webkit动画：无；
动画：无；
}

---

你的意思是这样的：？事实上，是的，就是这样。除了我希望它能在其他浏览器（至少是Firefox）中工作之外。不过，令人印象深刻的是，这都是CSS。试试这个：。我测试了Firefox 26和IE 11。这太棒了，谢谢你教我用纯CSS就可以了。作为答复提交，我会接受的。实际上，我最终选择了jQuery.transit：

@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;
}