CSS背景色切换

Question

是否可以仅使用CSS3来切换背景颜色？

我尝试过使用关键帧动画，但这只会转换背景颜色。我所要做的就是让背景颜色在5秒后改变，而不是过渡。我不想要任何悬停效果等。

我想，如果我能淡出它，只是为了切换到它，肯定有一种方法。

谢谢。

Answer 1

要制作不带transition-duration但带有delay的transition，可以使用

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