css - CSS 背景色スイッチ

Question

CSS3だけで背景色を切り替えることはできますか?

キーフレーム アニメーションを使用してみましたが、背景色のみが遷移します。私がやりたいのは、遷移なしで 5 秒後に背景色を変更することだけです。ホバー効果などは必要ありません。

切り替えるだけでフェードインできるなら、きっと方法があるに違いないと思いました。

ありがとう。

Answer 1

transitionでは、なしtransition-durationでを作成するには、次delayを使用します

html { background: red; transition: background 0s 5s; }

しかし、ここでの問題は、状態の変更がないため、遷移が機能しないことです。JavaScriptが必要だと思います。このようなもの：

$('html').addClass('loaded');

cssが

html { background: red; transition: background 0s 5s; }
html.loaded { background: blue; }

ここにフィドルがあります

補足:ステートメントのベンダー接頭辞に注意してください。transition

使用するanimations

これには JavaScript は必要ありません。

html {
    background: blue; /* fallback */
    animation: switchColor 5s;
}

@keyframes switchColor {
    0% {
        background: red;
    }
    99.9999% {
        background: red;
    }
    100% {
        background: blue;
    }
}

ここにフィドルがあります

純粋な jQuery の使用

または、これには JavaScript のみを使用することもできます。トランジションなしで色のみを切り替えたい場合は、次のsetTimeout()関数を使用します。

setTimeout(function() {
    $('html').css('background', 'blue');
}, 5000);

ここにフィドルがあります