Анимация градиента

[Sandr]

Всем привет.

Подскажите, как сделать плавное изменение градиента?

Есть код:

#change {
  border-top: 1px solid silver;
  background-color: #555;
  color: #ccc;
  width: 300px;
  height: 200px;
  background: -webkit-linear-gradient(top, white, black);
  -webkit-animation: 'grad' 3s infinite ease;
}
@-webkit-keyframes 'grad' {
   from {background: linear-gradient(top, white, black);}
   to {background: linear-gradient(top, black, white);}
 }

Но он не работает.

Пробовал указывать ключевые кадры - работает, но слишком громоздко получается.

Может быть есть вариант по лучше? А то раздувать код не хочется, ведь слишком толсто будет..

[a1rborn]

Проверяете надеюсь на хроме или на сафари?

[uuu]

для linear-gradient забыли префикс

как я понимаю анимироваться могут только свойства, а градиенты - это изображения, которые создает браузер

поэтому таким подходом эту задачу не решить

поправьте, если ошибаюсь

на js вроде просто сделать...

[Softlink]

Почитайте эту ветку там описано, как можно что-то подобное сделать.

[Sandr]

Проверяете надеюсь на хроме или на сафари?

Конечно)

для linear-gradient забыли префикс

как я понимаю анимироваться могут только свойства, а градиенты - это изображения, которые создает браузер

поэтому таким подходом эту задачу не решить

поправьте, если ошибаюсь

на js вроде просто сделать...

Поправил префиксы, но ничего не изменилось.

На JS не хочется такое делать, раз оно осуществимо на CSS.

[Sandr]

Почитайте эту ветку там описано, как можно что-то подобное сделать.

Прочитал, но мне немного другое нужно.

[Cryolite]

Можно менять один цвет, другой остается постоянным. (Сам градиент тоже не меняется, изменяется background-color. Но поскольку градиент; постоянный цвет - transparent, создается нужный эффект)

http://nimbupani.com/some-css-transition-hacks.html