css - 使用 CSS3 动画和线性渐变，日出和日落不平滑

Question

我正在使用 CSS3 开发日出和日落动画，请检查运行时jsFiddle 输出。

太阳正按预期从一种颜色过渡到另一种颜色

中午

点击查看大图

下午

点击查看大图

晚上

点击查看大图

夜晚

点击查看大图

清晨

点击查看大图

问题在于天空从一种模式过渡到另一种模式，颜色变化是突然的并且不是线性的

用于天空颜色更改的代码

@-webkit-keyframes changeSkyColor /* Safari and Chrome */
{
    1%{
        background: -webkit-linear-gradient(top, rgba(30, 152, 209, 1) 0%,rgb(202, 229, 243) 40%,rgba(125, 185, 232, 0.82) 100%); /* Background of Sky */
    }
    11%{
        background: -webkit-linear-gradient(top, rgba(30, 152, 209, 1) 0%,rgb(202, 229, 243) 40%,rgba(125, 185, 232, 0.82) 100%); /* Background of Sky */
    }
    33%  {
        background: -webkit-linear-gradient(top, rgb(240, 231, 26) 0%,rgb(245, 86, 12) 50%,rgba(197, 127, 81, 0.82) 100%); /* Background of Sky */
    }
    66%  {
        background: -webkit-linear-gradient(top, rgb(34, 33, 3) 0%,rgb(162, 55, 5) 50%,rgb(24, 10, 1) 100%); /* Background of Sky */
    }
    100% {
        background: -webkit-linear-gradient(top, rgba(5, 5, 5, 1) 0%,rgb(54, 55, 56) 40%,rgb(3, 3, 3) 100%); /* Background of Sky */
    }
}

请检查JsFiddle 代码（带有注释）。

• 我们不应该在动画中使用线性渐变吗？
• 如果是这样，如何使天空颜色平滑过渡？

有什么我想念的吗？如果有人可以给我一些参考或任何指示以推动它前进，我将不胜感激。

Answer 1

我要做的是将整个渐变从头到尾应用到单个元素上（在我的示例中，我将使用#sky），然后为该元素的位置设置动画，使其看起来颜色正在褪色。Twitter 的 Bootstrap 使用此技巧为按钮悬停的背景设置动画。

用这种方法查看我的 JSFiddle 分支：http: //jsfiddle.net/jakebellacera/6Zabx/

这是我添加的 CSS：

#sky {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 900%; /* This must be in a factor of three */
    background-image: -webkit-linear-gradient(top, rgba(30,152,209,1) 0%, rgb(202, 229, 243) 11%, rgba(125, 185, 232, 0.82) 22%,
                                                   rgb(240, 231, 26) 33%, rgb(245, 86, 12) 44%,   rgba(197, 127, 81, 0.82) 55%,
                                                   rgba(5, 5, 5, 1) 66%,  rgb(54, 55, 56) 77%,    rgb(3, 3, 3) 100%);
    background-image: -moz-linear-gradient(top, rgba(30,152,209,1) 0%, rgb(202, 229, 243) 11%, rgba(125, 185, 232, 0.82) 22%,
                                                rgb(240, 231, 26) 33%, rgb(245, 86, 12) 44%,   rgba(197, 127, 81, 0.82) 55%,
                                                rgba(5, 5, 5, 1) 66%,  rgb(54, 55, 56) 77%,    rgb(3, 3, 3) 100%);
    -webkit-animation-name: changeSkyColor; /* Change Shiny Sky to evening sky and to darkness */  /* Safari and Chrome */
    -webkit-animation-duration: 14s; /* Total time of animation */
    -webkit-animation-timing-function: linear; /* Just another timing function */
    -webkit-animation-iteration-count: infinite; /* Lets repeat sunrise and sunset till world ends :) */
    -webkit-animation-direction: alternate; /* Lets do in alternate fashion */
    -moz-animation-name: changeSkyColor; /* Change Shiny Sky to evening sky and to darkness */  /* Mozzilla */
    -moz-animation-duration: 14s; /* Total time of animation */
    -moz-animation-timing-function: linear; /* Just another timing function */
    -moz-animation-iteration-count: infinite; /* Lets repeat sunrise and sunset till world ends :) */
    -moz-animation-direction: alternate; /* Lets do in alternate fashion */
}

@-webkit-keyframes changeSkyColor /* Safari and Chrome */
{
    0%{
        top: 0px;
    }
    100% {
        top: -800%; /* #sky's height - 100% */
    }
}
@-moz-keyframes changeSkyColor /* Mozilla */
{

    0%{
        top: 0px;
    }
    100%  {
        top: -800%; /* #sky's height - 100% */
    }
}