Анимируем фон картинки с помощью CSS

Всем привет!
Зачастую мощные инструменты для создания анимации, как Adobe Photoshop или прочие графические редакторы не подходят по ряду причин: файл получается слишком большого размера, чтобы посетители вашего сайта не заметили его загрузки, либо создание анимации занимает много времени. Но в подобных случаях всегда есть выход. В данной ситуации воспользуемся возможностями CSS. Расскажу подробнее.

Чтобы сделать анимированный фон, нам потребуется одна картинка, желательно двухцветная. Заходим в Photoshop, открываем нашу картинку, выбираем инструмент «Волшебная палочка» (W), выделяем область, которую хотим анимировать.

Удаляем выделенную область. Также удаляем все нижние слои (если такие есть), чтобы фон был прозрачным. Сохраняем картинку в формате .png.

Вставляем картинку на страницу:

<img src="images/marilyn.png" alt="">

Теперь задаем ей фон (в нашем случае красный). Для чего? Для того, чтобы в браузерах, которые не поддерживают такой способ анимации (например, Opera 11.11), картинка не осталась прозрачной.
Настала пора анимировать. Добавляем в файл со стилями (например, style.css) следующее:
@-webkit-keyframes super-rainbow {
0% { background: red; }
20% { background: orange; }
40% { background: yellow; }
60% { background: green; }
80% { background: blue; }
100% { background: violet; }
}

@-moz-keyframes super-rainbow {
0% { background: red; }
20% { background: orange; }
40% { background: yellow; }
60% { background: green; }
80% { background: blue; }
100% { background: violet; }
}

Добавляем анимацию к нашей картинке:
img {
background: red;
-webkit-animation: super-rainbow 15s infinite alternate linear;
-moz-animation: super-rainbow 15s infinite alternate linear;
}
Вот и все!
Можете посмотреть скриншот ниже (для наглядности, показаны сразу несколько изображений с анимацией).

Можете посмотреть демо. Там еще есть анимация, реагирующая на наведение курсора (переход).
Источник: CSS Tricks
P.S. Сразу извиняюсь, если некоторые картинки не отображаются. Так как Habreffect закрыт, пришлось некоторые картинки грузить на свой блог.
Спасибо!