使用 JavaScript 重新触发 WebKit CSS 动画
在 CSS 中，动画是有时间限制的序列，可以使用 @ 应用于元素-webkit-关键帧规则。但是，在某些情况下，可能需要在不使用超时或多个动画的情况下重新触发动画。
一种解决方案是利用animationEnd 事件，该事件在动画完成时触发。在 WebKit 浏览器中，此事件称为 webkitAnimationEnd。通过将事件侦听器附加到元素，可以在动画完成后重置动画。
事件驱动的重置
在普通 JavaScript 中：
var element = document.getElementById('box');
element.addEventListener('webkitAnimationEnd', function(){
this.style.webkitAnimationName = '';
}, false);
document.getElementById('button').onclick = function(){
element.style.webkitAnimationName = 'shake';
};在jQuery：
var $element = $('#box').bind('webkitAnimationEnd', function(){
this.style.webkitAnimationName = '';
});
$('#button').click(function(){
$element.css('webkitAnimationName', 'shake');
});跨浏览器兼容性
对于跨浏览器支持，可以使用 CSS3 转换测试等库。它提供了一个支持对象，可以检测各种 CSS 属性和事件，包括动画支持：
var css3AnimationSupport = (function(){
var div = document.createElement('div'),
divStyle = div.style,
support = {
transition: ...
transform: ...
animation: ...
};
}());通过使用此支持对象，可以检测每个浏览器的动画属性和事件，从而实现一致的处理跨多个平台的 CSS 动画。
以上是如何使用 JavaScript 重新触发 WebKit CSS 动画？的详细内容。更多信息请关注PHP中文网其他相关文章！
