Данная техника не является чем-то супер новым, она комбинирует две концепции, которые очень хорошо знакомы разработчикам CSS. Спрайты CSS являются методом для создания прокруток изображений без использования JavaScript. CSS3 анимация (или если быть точнее, свойство CSS3 transition) является новой особенностью, которую поддерживают некоторые новые браузеры, такие как Chrome и Safari. Как и спрайты, CSS3 анимация не требует использования JavaScript. Комбинируя эти два метода мы можем создавать простые анимационные эффекты для смены изображений. На демонстрационной странице показаны несколько простейших примеров использования такой комбинации. Примеры могут показаться не очень привлекательными и практичными, но они созданы только для того, чтобы продемонстрировать возможности комбинации двух техник CSS. Четвертый пример на демонстрационной странице (с надписью “Вставьте диск”) использует встроенное изображение вместе с фоном, который анимируется. Такое сочетание придает дополнительный шарм анимации, так как создается впечатление, что диск вставляется в карман. На демонстрационной странице использованы изображения в формате PNG с прозрачностью, которые не поддерживаются в IE6. Для него можно использовать либо изображения GIF, либо специальный JavaScript код для корректировки проблемы. Выгоды от использования данного метода Первое очевидное преимущество - не надо использовать JavaScript. Другое преимущество - браузеры, которые не поддерживают свойства, отображают эффект простой и аккуратной сменой изображений без анимации. Таким образом никакая графика не теряется (хотя происходит утрата эффектного вывода изображения). Некоторые недостатки Метод базируется на использовании спрайтов со всеми их недостатками и достоинствами. Также внезапное изменение фонового изображения в неподдерживающих свойства браузерах выглядит не очень эффектно. Можно интегрировать решение на JavaScript для таких браузеров, но такие методы связаны с дополнительной нагрузкой на разработчика. Заключение При сочетании прозрачных PNG изображений, свойства, z-index, фиксированных фоновых изображений и других техник CSS можно получить отличные визуальные эффекты без использования JavaScript.