使用CSS创建网页背景淡出

Question

我想做一个网站，当你打开它，背景消失成不同的颜色。

示例：

/* Chrome, Safari, Opera */
@-webkit-keyframes {
    from {
        background: white;
    }

    to {
        background: #F7F2E0;
    }
}

/* Firefox */
@-moz-keyframes {
    from {
        background: white;
    }

    to {
        background: #F7F2E0;
    }
}

@keyframes {
    from {
        background: white;
    }

    to {
        background: #F7F2E0;
    }
}

但是当我运行脚本时，什么都不会发生。

Answer 1

您需要向动画添加一个名称，然后将动画属性添加到所需的元素中。

这里的例子

@keyframes background {
    from {
        background:white;
    }
    to {
        background:#000;
    }
}

在下面的动画速记中，为animation-fill-mode属性添加值forwards，以便在最后一个颜色结束动画。

body {
    animation: background 4s forwards;
}

为了简单起见，供应商省略了前缀--完整的CSS参见http://jsfiddle.net/68Xgx/。

我建议多读一些关于MDN的文章。

Answer 2

你必须给你的关键帧起一个名字，然后把它应用到身体上。参见此示例。用于动画和浏览器支持请看这里。

@keyframes fadeBackgroud{
    from {
        background:white;
    } to {
        background:#F7F2E0;
    }
}

body {
    animation:fadeBackgroud 5s infinite;
}