几秒钟后如何淡化多种背景颜色？

Question

我想知道如何在 css 几秒后更改背景颜色？

例如我想要3种颜色：蓝色、红色、绿色。每 3 秒后背景颜色会发生变化。

有人知道吗？

这是我的代码。但我只能更改 2 种颜色并且不循环

p {
    display: inline;
    animation: background-fade 3s forwards;
    -webkit-animation: background-fade 3s forwards;
    -moz-animation: background-fade 3s forwards;
}

@-webkit-keyframes background-fade {
    100% {
        background:#c92884;
    }
}

JSFidlle http://jsfiddle.net/326mJ/7/

Answer 1

这样试试：Demo

body{

animation: background-fade 10s infinite;    
}

@keyframes background-fade {
    0% {
        background:red;
    }
    50% {
        background:blue;
    }
    100% {
        background:green;
    }
}

您需要使用 infinite 而不是 forwards 来循环

几秒钟后如何淡化多种背景颜色？

How to fade multiple background colors after few seconds?

css

css-transitions