Это впечатляет. Мы все видели чистую анимацию CSS3, но этот пример — один из самых амбициозных на сегодняшний день. Он повторяет классическую последовательность заголовков мультфильма «Человек-паук» 1967 года (откройте ссылку в браузере Webkit, таком как Chrome или Safari).
Ах, счастливые воспоминания! Последовательность была создана Энтони Кальзадиллой из Optimum7 , американского агентства веб-разработки. Он создал анимированный Star Wars AT-AT Walker, который Эндрю Тетло проанализировал в феврале .
Последовательность Spider-Man в основном использует HTML5 и CSS3 с объявлениями -webkit-animation. Для переключения между сценами использовался небольшой JavaScript-код на основе jQuery, но все анимированные эффекты обрабатываются CSS. Наконец, audio
Энтони заявляет, что его самая большая проблема заключалась в синхронизации анимаций и сцен, хотя он считает, что было бы возможно переключать сцены с помощью CSS3, а не JavaScript.
Очевидно, что в демонстрацию было вложено много усилий, и Энтони дает некоторые подробные технические пояснения . Это показывает, что возможно, хотя я не верю, что у многих разработчиков было бы время или терпение, чтобы написать это вручную. Тем не менее, я не удивлюсь, если такие компании, как Adobe, рассмотрят возможность предоставления анимированных средств экспорта CSS3 в своих приложениях (тем более, что Flash запрещен для определенных платформ ).
Вы обнаружили какие-нибудь отличные примеры CSS3-анимации?