Восход и закат не гладкие с анимацией CSS3 и линейным градиентом

Я разрабатываю анимацию восхода и заката с помощью 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(с комментариями).

  • Разве мы не должны использовать линейный градиент в анимации?
  • Если да, то как сделать так, чтобы цвет неба переходил плавно?

Есть ли что-то, что мне не хватает? Я был бы признателен, если бы кто-нибудь мог дать мне несколько ссылок или какие-либо указатели, чтобы продвигать его вперед.


css css-animations css-transitions linear-gradients
person Sudarshan    schedule 09.02.2013    source источник
comment
По крайней мере, согласно w3, это невозможно: [w3.org/TR/ css3-переходы/]. Может быть, единственной альтернативой было бы одновременное использование обоих градиентов (в псевдоэлементе) и анимация непрозрачности?   -  person vals    schedule 11.02.2013
comment
@vals: звучит как хороший вариант :) .. спасибо за ответ   -  person Sudarshan    schedule 19.02.2013

Ответы (1)


arrow_upward
5
arrow_downward

Я бы применил весь градиент от начала до конца к одному элементу (в моем примере я буду использовать #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% */
    }
}
person Jake Bellacera    schedule 14.03.2013
comment
Отличный подход, не могли бы вы также сообщить мне, почему height: 900%; /* This must be in a factor of three */ вы использовали код для коэффициента 3 - person Sudarshan; 31.03.2013
comment
Так что это поровну делится на три типа неба (восход, закат, ночь) - person Jake Bellacera; 01.04.2013