CSS 改变（过渡）背景颜色答案

【问题标题】：CSS changing (transitioning) background colorCSS 改变（过渡）背景颜色
【发布时间】：2014-07-18 11:56:11
【问题描述】：

我是代码初学者。前段时间看到一个github项目，可以让背景颜色自动从红变白到绿变黑。

似乎不可能再次找到它，我在互联网上寻找选项时正在苦苦挣扎。我想我真的用正确的词来解释自己。

任何提示将不胜感激。

谢谢。

【问题讨论】：

【解决方案1】：

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

body {
    animation: bgcolour 10s infinite alternate; /* Don't forget the "alternate" which reverses the animation to avoid a jump form 100% to 0% */
}

DEMO

【讨论】：

【解决方案2】：

试试这个 CSS：JSFIDDLE

body 
{
    background:red;
    animation:myfirst 5s;
    -moz-animation:myfirst 5s infinite; /* Firefox */
    -webkit-animation:myfirst 5s infinite; /* Safari and Chrome */
}


@-moz-keyframes myfirst /* Firefox */
{
    0%   {background:red;}
    25%  {background:white;}
    50%  {background:green;}
    75%  {background:black;}
    100%   {background:red;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
    0%   {background:red;}
    25%  {background:white;}
    50%  {background:green;}
    75%  {background:black;}
    100%   {background:red;}
}

【讨论】：

@user3852855，如果此答案解决了您的问题，请考虑将其标记为正确答案。谢谢。