使用css3动画和addClass在点击时使背景闪光

Question

当处理动作时，我想让某个div闪烁绿色背景，然后淡出回到正常状态。我不想加载heave jquery UI库。做这个的最好方式是什么？ （我知道这篇文章与其他人相似，但由于某些原因，我无法为此解决此问题！）现在我正在尝试以下操作，但它不起作用： http://jsfiddle.net/R8c9Z/。

HTML：

<div id="flashMe">Click me to toggle class</div> 

JS：

$("#flashMe").click(function() { 
    $("#flashMe").toggleClass("flashNow"); 
}); 

CSS：

#flashMe { 
    background:none; 
} 
.flashNow { 
    animation-name: flash; 
    animation-timing-function: ease-out; 
    animation-duration: 2s; 
} 
@-webkit-keyframes flash { 
    0% { background:green; } 
    100% { background:none; } 
} 
@keyframes flash { 
    0% { background:green; } 
    100% { background:none; } 
} 

Answer 1

http://jsfiddle.net/R8c9Z/3/

document.getElementById('flashMe').onclick = function() { 
    this.classList.toggle("flashNow"); 
}); 

您还错过了一些供应商前缀。

.flashNow { 
    animation-name: flash; 
    animation-timing-function: ease-out; 
    animation-duration: 2s; 
    -webkit-animation-name: flash; 
    -webkit-animation-timing-function: ease-out; 
    -webkit-animation-duration: 2s; 
} 
@-webkit-keyframes flash { 
    from { background: green; } 
    to background: none; } 
} 
@keyframes flash { 
    0% { background: green; } 
    100% { background: none; } 
}