因此,我有以下-webkit-animation规则:
-webkit-animation
@-webkit-keyframes shake { 0% { left: 0; } 25% { left: 12px; } 50% { left: 0; } 75% { left: -12px; } 100% { left:0; } }
还有一些CSS定义了我的一些动画规则box:
box
#box{ -webkit-animation-duration: .02s; -webkit-animation-iteration-count: 10; -webkit-animation-timing-function: linear; }
我可以shake在#box这样的:
shake
#box
document.getElementById("box").style.webkitAnimationName = "shake";
但是我以后不能再动摇了。
这只会摇晃盒子一次:
someElem.onclick = function(){ document.getElementById("box").style.webkitAnimationName = "shake"; }
如何在不使用超时或多个动画的情况下通过JavaScript重新触发CSS动画?
我在CSS3转换测试github页面上根据源代码和示例找到了答案。
基本上,CSS动画具有一个animationEnd在动画完成时触发的事件。
animationEnd
对于Webkit浏览器,此事件称为“webkitAnimationEnd”。因此,为了在调用动画后重置动画,您需要在事件元素中添加事件监听器animationEnd。
webkitAnimationEnd
在普通的javascript中:
var element = document.getElementById('box'); element.addEventListener('webkitAnimationEnd', function(){ this.style.webkitAnimationName = ''; }, false); document.getElementById('button').onclick = function(){ element.style.webkitAnimationName = 'shake'; // you'll probably want to preventDefault here. };
并使用jQuery:
var $element = $('#box').bind('webkitAnimationEnd', function(){ this.style.webkitAnimationName = ''; }); $('#button').click(function(){ $element.css('webkitAnimationName', 'shake'); // you'll probably want to preventDefault here. });
CSS3过渡测试的源代码(如上所述)具有以下support对象,这可能对跨浏览器的CSS过渡,转换和动画很有帮助。
support
以下是支持代码(重新格式化):
var css3AnimationSupport = (function(){ var div = document.createElement('div'), divStyle = div.style, // you'll probably be better off using a `switch` instead of theses ternary ops support = { transition: divStyle.MozTransition === ''? {name: 'MozTransition' , end: 'transitionend'} : // Will ms add a prefix to the transitionend event? (divStyle.MsTransition === ''? {name: 'MsTransition' , end: 'msTransitionend'} : (divStyle.WebkitTransition === ''? {name: 'WebkitTransition', end: 'webkitTransitionEnd'} : (divStyle.OTransition === ''? {name: 'OTransition' , end: 'oTransitionEnd'} : (divStyle.transition === ''? {name: 'transition' , end: 'transitionend'} : false)))), transform: divStyle.MozTransform === '' ? 'MozTransform' : (divStyle.MsTransform === '' ? 'MsTransform' : (divStyle.WebkitTransform === '' ? 'WebkitTransform' : (divStyle.OTransform === '' ? 'OTransform' : (divStyle.transform === '' ? 'transform' : false)))) //, animation: ... }; support.transformProp = support.transform.name.replace(/([A-Z])/g, '-$1').toLowerCase(); return support; }());
我尚未添加代码来检测每个浏览器的“动画”属性。我已将此答案设为“社区Wiki”,并留给您。