CSSトランジションを「反転」することはできますか？

Question

ここに私がしたいことがあります：

これはクイズです。質問といくつかの回答があります。 ユーザーは1つの回答を選択し、正しい答えが何であるか表示されます。

正解ボタンが基本的に「点灯」してから、通常の状態に戻っていきたいと思います。

私は要素をシンプルなスタイルにしてから、ホワイトボックスシャドウのクラスを追加できます。 そして、私は2つの間で移行することができます。

しかし、私はクラスを追加したいと思う、そして、要素は完全な白いボックスの影を取得し、通常の状態にフェードバックします。

これは可能ですか？

Answer 1

Javascriptを要素にクラス（NO jqueryの）を適用：

のdocument.getElementById（ "ID"）クラス名は= "newclass";。

Answer 2

あなたは純粋な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プレフィックスを追加することを忘れてはいけない要素のためにそれを行うには@keyframesを使用する必要があります。

w3schools on CSS3 Animation

Answer 3

Hereにこの例をチェックアウトは、あなたのためにjsfiddleです。必要な作業を行う必要があります。黒い矩形をクリックするだけです。