css - CSS トランジションを「反転」できますか?

Question

これが私がやりたいことです：

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

正解ボタンは基本的に「点灯」してからフェードアウトして元に戻るようにしてほしいです。

そのため、要素にシンプルなスタイルを与えてから、白いボックスシャドウを持つクラスを追加できます。そして、私は2つの間を移行できます。

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

それは可能ですか？

score 1 · Accepted Answer

あなた@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でこの例をチェックしてくださいCSS3 Animation

score 0 · Accepted Answer

javascriptはクラスを要素に適用します（jqueryなし）：

document.getElementById（ "id"）。className = "newclass";

score 0 · Accepted Answer

これがあなたのためのjsfiddleです。必要なことを行う必要があります - 黒い四角形をクリックするだけです。

3 に答える 3