CSS3 – 添加类以触发动画并在完成时删除类

我有一个div，当我点击它时，jquery添加了一个启动动画运行的类。 当动画停止时（3秒后），我希望删除该类，这样当再次单击div时，动画将重新开始。

这只是测试，目前只有Chrome浏览器。

这是我的CSS3：

.spin360 { -webkit-animation-name: spin; -webkit-animation-duration: 3s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease; -webkit-animation-fill-mode: forwards; } @-webkit-keyframes spin { 0% { -webkit-transform: rotateX(0); } 100% { -webkit-transform: rotateX(-360deg); } } 

这是我的脚本：

  $(document).ready(function () { $('#spinButton').click(function () { $('#shape').addClass('spin360'); }); });  

这是我尝试过的：

  $(document).ready(function () { $('#spinButton').click(function () { $('#shape').addClass('spin360').on('webkitAnimationEnd', function () { $('#shape').removeClass('spin360'); }); }); });  

和

  $(document).ready(function () { $('#spinButton').click(function () { $('#shape').addClass('spin360'); }); $('#spinButton').addEventListener('webkitAnimationEnd', function (e) { $('#shape').removeClass('spin360'); }); });  

在所有情况下 – 我的动画在第一次点击时运行，但不是后续点击。

Answer 1

您也可以以跨浏览器的方式执行此操作：

 $('#spinButton').bind('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function (e) { $('#shape').removeClass('spin360'); }); 

Answer 2

我使用的是旧版本的jquery。

我更新到1.8.0，它的工作原理。

Answer 3

//工作正常但是你确实留下了我们的标准声明//所以你的代码只适用于Chrome，Safari，Opera

/ * Chrome，Safari，Opera * /
@ -webkit-keyframes spin {0％{-webkit-transform：rotateX（0）; } 100％{-webkit-transform：rotateX（-360deg）; }}

/ *标准语法* /
@keyframes spin {0％{-webkit-transform：rotateX（0）; } 100％{-webkit-transform：rotateX（-360deg）; }}