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; }

这是Fiddle

附注：请注意transition语句的vendor prefixes。

使用animations

这不需要JavaScript：

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

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

以下是Fiddle

使用纯jQuery

或者你可能只使用JavaScript。如果您只想切换颜色而不进行转换，请使用setTimeout()功能：

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

以下是Fiddle