css - CSS 背景颜色开关

Question

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

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

我想肯定有办法，如果我可以淡入它只是为了切换到它。

谢谢。

Answer 1

好吧，要制作 atransition没有 atransition-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);

这是小提琴