CSS Gradient Animate

Я пытаюсь анимировать градиент CSS, как описано here, но я не могу заставить его работать. В качестве примера я собрал this jsfiddle.CSS Gradient Animate

Как видно, CSS-переходы на градиентах, похоже, не работают.

div#Machine { 
    -webkit-transition: background 5s; 
    -moz-transition: background 5s; 
    -ms-transition: background 5s; 
    -o-transition: background 5s; 
    transition: background 5s; 
    background: rgb(71, 234, 46); 
    background: -moz-linear-gradient(top, rgba(71, 234, 46, 1) 0%, rgba(63, 63, 63, 1) 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(71, 234, 46, 1)), color-stop(100%, rgba(63, 63, 63, 1))); 
    background: -webkit-linear-gradient(top, rgba(71, 234, 46, 1) 0%, rgba(63, 63, 63, 1) 100%); 
    background: -o-linear-gradient(top, rgba(71, 234, 46, 1) 0%, rgba(63, 63, 63, 1) 100%); 
    background: -ms-linear-gradient(top, rgba(71, 234, 46, 1) 0%, rgba(63, 63, 63, 1) 100%); 
    background: linear-gradient(top, rgba(71, 234, 46, 1) 0%, rgba(63, 63, 63, 1) 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#47ea2e', endColorstr='#3f3f3f', GradientType=0); 
} 
div#Machine.doublewin { 
    background: rgb(247, 247, 49); 
    background: -moz-linear-gradient(top, rgba(247, 247, 49, 1) 0%, rgba(63, 63, 63, 1) 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(247, 247, 49, 1)), color-stop(100%, rgba(63, 63, 63, 1))); 
    background: -webkit-linear-gradient(top, rgba(247, 247, 49, 1) 0%, rgba(63, 63, 63, 1) 100%); 
    background: -o-linear-gradient(top, rgba(247, 247, 49, 1) 0%, rgba(63, 63, 63, 1) 100%); 
    background: -ms-linear-gradient(top, rgba(247, 247, 49, 1) 0%, rgba(63, 63, 63, 1) 100%); 
    background: linear-gradient(top, rgba(247, 247, 49, 1) 0%, rgba(63, 63, 63, 1) 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f731', endColorstr='#3f3f3f', GradientType=0); 
}

Я использую javascript/jQuery для добавления/удаления класса «doublewin». При использовании одного и того же кода, но с использованием сплошного фона он отлично работает, как показано на ссылке jsfiddle.

Действительно ли можно анимировать градиент CSS3 или я делаю что-то неправильно?

Любая помощь очень ценится.

источник

2013-09-01 Dan Twining

Кажется, что переход с градиентами еще не поддерживается, я не знаю, как этот ответ был принят/сохранен, вы можете проверить этот [другой ответ] (http://stackoverflow.com/a/9695075/2049063) с методом для «поддельных» переходов с использованием элементов с абсолютным расположением –

Привет, я написал тот первый ответ. В настоящее время я работаю, чтобы выяснить, почему это не работает, и очень сожалею о неудобствах. – arik

Посмотрите здесь http://jsbin.com/UsUtiQek/4/ –

Кажется, вы не можете анимировать градиенты фонового изображения css, но вы все равно можете анимировать непрозрачность, чтобы попытаться заставить это работать.

Если у вас есть два контейнера, один поверх другого с точно такой же ширины и высоты, каждый с различным цветом градиента фона, вы можете приглушить контейнер сверху непрозрачности: 0.

Если вы не хотите добавлять дополнительную надпись коду для второго фонового контейнера, вы можете использовать псевдоселектора CSS :: before и :: after для этого.

источник

2013-09-01 21:21:24

CSS Gradient Animate

ответ

Смежные вопросы