CSS3トランジションで色を追加して消したい

Question

DIVの背景（背景色がない）を赤色にしてから空白に戻したい。今ではJSを使って新しいCLASS（赤を追加する）を問題のDIVに追加し、CSS3は背景色にイージングを追加します。しかしそれはそれを楽にします、私が望むのは、それが赤くなって緩和することです。私は、JSを使って複数のCLassを遅れて追加することでこれを行うことができると思います。 CSS3を使ってこれを完全に行うことはできますか？

Answer 1

ハイライトのようなものが必要な場合は、CSS3のアニメーションを使用します。古いブラウザではサポートされていません。これについてはcaniuseをチェックしてください。

私は短い例over hereを作成しました。

リンクをクリックするとハイライトが呼び出されます。ここにCSS（ベンダープレフィックスなし）があります：

@keyframes highlight { 
    0% { 
    background: red 
    } 
    100% { 
    background: none; 
    } 
} 

#highlight:target { 
    animation: highlight 1s; 
} 

Answer 2

jQuery UIのアニメーションメソッドを使用する方法の1つは、「通常の」jQueryアニメーション（）を背景色のようなものに拡張することです。

このようなトランジションはcss3では可能ですが、明らかに広いブラウザサポートではありません。ユーザーは本部に置いたときの色をフェードイン、およびマウスが出ている時に0.5秒以上、それをバックフェードインします

#maDiv { 
    -webkit-transition:background-color 0.5s linear; 
    -moz-transition: background-color 0.5s linear; 
    -o-transition: background-color 0.5s linear; 
    height: 20px; 
    width: 20px; 
    background:#000; 
} 

#maDiv:hover { 
    background: #ff0; 
} 

。ブラウザのサポートの詳細については、ここをクリックしてください：http://www.html5rocks.com/en/features/presentation