js實現每次點擊都重複執行CSS動畫——animation

Write By Monkeyfly以下內容均為原創，如需轉載請注明出處。
前提
想實現的效果：每次點擊span元素時，都要實現樣式的過渡變換並最終恢複默認樣式（主要指背景顏色和字體顏色）。 具體變化過程：默認顏色——指定顏色——恢複默認顏色。
最終效果如下圖示：
成功的做法
該做法的出處：javascript中animation運動， 怎樣通過點擊事件讓他重複執行
注：這一做法是在segmentfault的評論中發現的。（因為評論默認隱藏，點擊才能查看，所以之前並沒有看過評論）使用animationend事件將動畫（animation）屬性去掉，下次點擊再加上。
CSS 動畫播放時，會發生以下三個事件：

animationstart // CSS 動畫開始後觸發
animationiteration //CSS 動畫重複播放時觸發
animationend // CSS 動畫完成後觸發

所以，只要在動畫完成後，將動畫屬性清除掉就可以實現了。點擊查看詳情：animationend 事件
具體代碼如下所示：

//CSS樣式：
span.msg-data{
 display: inline-block;
 width: 3.6rem;
 height: 0.67rem;
 line-height: 0.67rem;
 margin-bottom:0.4rem;
 margin-left: 0.47rem;
 background-color: #fff;
 border-radius: 0.05rem;
 border:0.02rem solid #e5e5e5;
 text-align: center;
 font-size: 0.32rem;
 color:#acacac;
}
//自定義動畫效果
@keyframes switchColor{
 0% {background-color:#fff;color:#acacac;}
 50% {background-color:#ff9900;color:#fff;}
 100%{background-color:#fff;color:#acacac;}
}

//js代碼：
$("span.msg-data").bind("click",function(event) {
 $(this).css('animation', 'switchColor 0.8s');
});
$("span.msg-data").each(function() {
 $(this)[0].addEventListener("animationend",function(){
 $(this).css("animation","");
 });
});

嘗試過的錯誤做法

/*做法1：每次點擊前先清除掉動畫屬性。實測失敗*/
//js：代碼
$("span.msg-data").bind("click",function(event) {
 $(this).css('animation', '');
 $(this).css('animation', 'switchColor 0.8s');
});

/*做法2：把animation的代碼放在一個新的類名中，通過添加一個延時器刪除類名實現。實測失敗*/
//css代碼：通過動態的添加和刪除類名實現
span.selected{
 background-color: #ff9900;
 color:#fefefe;
}
//js：代碼
$("span.msg-data").bind("click",function(event) {
 $(this).addClass('selected');
 setTimeout(function () {
 $(this).removeClass('selected');
 }, 1000);
});

失敗效果的演示圖
如下圖所示，只有首次點擊才有效。