用javascript重复css动画一次

为什么我不能用javascript重复一次CSS动画？用javascript重复css动画一次

小提琴：http://jsfiddle.net/6XtSa/

来源

2011-12-08 Tyilo

无法看到任何动画！ – Kangkan

@TJ它在Chrome中也可以工作，但是我相信，但是在其他浏览器中，如firefox和opera分别带-mozzila和-o前缀，如果我正确记得 – Luke

@BubbaWoop我已删除我的评论。你是对的，这是有道理的，因为Chrome也由webkit引擎提供支持。 –

下面是一个从删除的答案改编而来的例子，它建议使用类。这个答案并不完全正确，因为它运行无限。

这样做是为了增加对click类并删除它时animationend事件触发：

@-webkit-keyframes rotate { 
    from { 
     -webkit-transform: rotate(0deg); 
    } 
    to { 
     -webkit-transform: rotate(360deg); 
    } 
} 

#button.animating { 
    -webkit-animation-name: rotate; 
    -webkit-animation-timing-function: linear; 
    -webkit-animation-duration: 1s; 
}

var btn = document.getElementById('button'); 

btn.addEventListener('click', function() { 
    this.className = 'animating'; 
}); 
btn.addEventListener('webkitAnimationEnd', function(){ 
    this.className = ''; 
});

http://jsfiddle.net/AndyE/9LYAT/

来源

2011-12-08 09:26:02

是的，我删除了因为我误解了问：我认为他想要一个无限的动画（咖啡还没有踢过：P） – stecb

@stecb：我认为你是在正确的路线。使用类保持整洁，海事组织。 –

的按钮仅旋转一次的原因是因为它的旋转到和不受 360°。这是绝对的价值。要再次旋转，您必须从360°旋转至720°。你可能想看看这篇文章：Rotating a Div Element in jQuery ，具体这个的jsfiddle在其中一个答案：http://jsfiddle.net/uLrVy/

来源

2011-12-08 08:41:14

我如何重置，所以我不必用javascript做动画？ – Tyilo

你可以尝试这样的事情：http://jsfiddle.net/6tZd3/

按照Safari CSS Visual Effects Guide你可以只听webkitTranstionEnd事件通知动画已完成。此时，您可以重新设置动画，而无需使用JavaScript进行动画制作。

来源

2011-12-08 09:09:04 martineno

小提琴在我的镀铬中似乎不起作用。 – Tyilo

奇怪。它适用于我的Mac OS X上的Chrome 15.0.874.121。不知道可能发生了什么。 – martineno

用javascript重复css动画一次

回答

相关问题