CSS3 Анимации
В своей работе сейчас мы часто используем CSS анимации.
Их преимущества перед стандартными анимациями jQuery:
- Доступно гораздо больше параметров анимации, в т.ч. можно анимировать любое CSS свойство
- Меньшая нагрузка на процессор пользователя → большая отзывчивость интерфейса во время работы анимации
- CSS Transitons могут использовать видеокарту компьютера для аппаратного ускорения → более плавные анимации
- Простые анимации возможны без использования JavaScript → больше пользователей увидит Вашу анимацию, а не статичную картинку
- Возможность fallback → для пользователей IE используются стандартные keyframe анимации jQuery
CSS анимации поддерживаются всеми современными броузерами, в т.ч. IE10: http://caniuse.com/css-transitions
Пример
Практически везде на этом сайте анимации выполнены через CSS Transitions.
Небольшое сравнение работы разных вариантов анимации Вы можете видеть ниже.
Обратите внимание, что в зависимости от Вашего броузера анимации могут выглядеть по-разному. В наших проектах мы стараемся обходить различные недостатки и недоработки броузеров, тут же это показано специально.
Кликните на полоску, чтобы запустить отдельный пример.
JavaScript Animation | |
CSS Transition | |
CSS Transition + Easing |
Возможно, CSS3 анимации всё ещё не такие плавные и красивые, как хотелось бы, но они уже заметно лучше стандартных анимаций, и им ещё есть куда рости - разработчики броузеров продолжают доработки в этой области, и в ближайшем будущем разница станет ещё заметнее.