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

Here is a Fiddle

旁注:注意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);

这里是提琴