我正在尝试使用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()
,但我不确定整体实现.
尝试使用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/