Css переход на градиент фонового изображения

У меня есть фоновое изображение в моем css3 с определенным изображением и градиентом. Я также хочу иметь переход, когда класс изменяется с on_time → too_late или наоборот.

Я не могу получить переход на градиент. Это как-то поддерживается в css3?

Спасибо

div.too_late
{
    color: White;        
    background-image: url(../Content/images/uit_white.png), -webkit-linear-gradient(top, #feb233 0%, #f39801 100%);       

    -webkit-transition-property: background-image, color; 
    -webkit-transition-duration: 5s;    
}

div.on_time
{
    color: #222;        
    background-image: url(../Content/images/uit_black.png), -webkit-linear-gradient(top, yellow 0%, #99ff33 100%);    

    -webkit-transition-property: background-image, color; 
    -webkit-transition-duration: 5s;           
}

Ответы

Ответ 1

Невозможно иметь переходы на фоновых градиентах. Но вы можете взглянуть на эту ссылку, чтобы заставить ее работать с "хаками": http://nimbupani.com/some-css-transition-hacks.html

Вы также можете заставить его отображаться как изменяющееся с помощью сдвига фона: http://sapphion.com/2011/10/css3-gradient-transition-with-background-position/

Вот аналогичный вопрос с большим количеством ссылок и информации. btw: Используйте переходы CSS3 с фоном градиента

Ответ 2

"Градиенты пока не поддерживают переходы (хотя спецификация говорит, что они должен). Если вы хотите, чтобы эффект затухания был с градиентом фона, вы должны установить непрозрачность на контейнере и переместить непрозрачность."

Источник: Используйте переходы CSS3 с градиентными фонов