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

Posted 2023-03-06

【中文标题】使用 CSS3 Transform Scale 和 jQuery 动画脉冲效果

【英文标题】：Animate pulsing effect using CSS3 Transform Scale and jQuery

【发布时间】：2014-01-20 15:57:32

【问题描述】：

我正在尝试使用 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() 上停止动画，但我不确定整体的实现。

【问题讨论】：

你的意思是这样的：jsfiddle.net/g4zC7？仅限 Chrome

其实，没错，就是这样。除了我希望它在其他浏览器中工作（至少是 Firefox）。令人印象深刻的是，这都是 CSS。

试试这个：jsfiddle.net/rooseve/g4zC7/2。我测试了 Firefox 26 和 IE 11。

这太棒了，感谢你教我使用纯 CSS 是可能的。提交它作为答案，我会接受它。我实际上最终还是选择了 jQuery.transit：github.com/rstacruz/jquery.transit

【参考方案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;

@-webkit-keyframes pulse 
    0% 
        -webkit-transform: scale(1, 1);
    
    50% 
        -webkit-transform: scale(1.1, 1.1);
    
    100% 
        -webkit-transform: scale(1, 1);
    ;


@keyframes pulse 
    0% 
        transform: scale(1, 1);
    
    50% 
        transform: scale(1.1, 1.1);
    
    100% 
        transform: scale(1, 1);
    ;


#test 
    background: red;
    width: 20px;
    height: 20px;
    -webkit-animation: pulse 1s linear infinite;
    animation: pulse 1s linear infinite;

#test:hover 
    -webkit-animation: none;
    animation:none;

<div id="test"></div>

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