Анимируем CSS-градиенты

Как известно, градиенты не любят анимироваться.

Если быть точным, положение и размер градиента анимируются успешно (как и любого другого фона):

Но попытка манипулировать цветами, составляющим градиент, терпит крах:

В FF цвета в примере не будут меняться вообще, в Хроме — будут, но резко, без плавного перехода.

UPD: В Webkit с помощью Sass можно сделать имитацию плавной смены цветов, но код получается неприличных размеров. Пример: codepen.io/yoksel/pen/gBDFj. На момент правки демо не работает в Firefox (27.0.1), анимация просто игнорируется.

В некоторых случаях при необходимости сделать градиент с плавной сменой цветов можно использовать box-shadow, который прекрасно анимируется. Тест:

Примерный код:

DIV {
  background: gold;
  box-shadow: 0 -200px 100px -120px crimson inset;
  animation: background 3s infinite alternate;
}

@keyframes background {
  50% {
    background: skyblue;
    box-shadow: 0 -200px 100px -100px yellowgreen inset;
  }
}

Фоновый цвет в данном случае является частью градиента.

Тень задается с параметром inset (внутреняя тень), с большим радиусом размытия (в примере 100px), чтобы сымитировать градиент, и с большими отрицательными отступами (-120px) — чтобы от обычной внутренней тени была видна только нижняя часть. Почитать подробнее про тени можно тут.

Сложные градиенты делаются несколькими тенями:

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

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

Тени отлично справились. Я думаю, что способ может быть полезен в некоторых случах и вполне имеет право на сущестование.