css - 背景画像間の変化をアニメーション化しますか?

Question

サイトで繰り返し背景タイルとして緑色の画像を使用しています。要素をクリックすると、背景が青色の繰り返し画像に変わります。

色の変化をアニメートしたい。これはCSS3で行うことができますか? 1 つの解決策は、耕作可能なパターンに白黒の画像を使用し、CSS3 で色付けすることでしょうか?

Answer 1

background-image単色のタイルを使用する代わりに、背景を透明にします。これにより、background-colorCSS3 を使用して同じ効果を得ることができます。

デモ: http://jsfiddle.net/yLLNa/

CSS

html {
    background-color: red;
    transition: background-color 1s linear;
}

html:hover {
    background-color: blue;
}