我可以「倒置」CSS過渡嗎？

Question

下面是我想要做的：

這是一個測驗，有一個問題和幾個答案。 用戶選擇1個答案，然後顯示正確的答案是什麼。

我希望正確的答案按鈕「點亮」基本上，然後淡出恢復正常。

所以我可以給我的元素一個簡單的風格，然後添加一個白色的盒子陰影類。 我可以在兩者之間轉換。

但我想添加類，然後元素獲取完整的白色陰影，然後淡出回到正常狀態。

這可能嗎？

Answer 1

JavaScript的應用類元素（不jquery的）：

的document.getElementById（ 「ID」）的className = 「的NewClass」。

Answer 2

您需要使用@keyframes做純CSS3

@keyframes animation_name{ 
    0% {background: color1;} 
    50% {background: color2;} 
    100% {background: color1;} 
} 

和元素在您想要的動畫

css_selector{ 
    animation: animation_name 5s; 
    animation-iteration-count:infinite; 
} 

不要忘記添加瀏覽器特定-moz，-webkit前綴。

試試下面這個例子上w3schools on CSS3 Animation

Answer 3

Here是你的jsfiddle。應該做你需要的 - 只需點擊黑色的矩形。