назад
16 янв

CSS3 Анимации

В своей работе сейчас мы часто используем CSS анимации.
Их преимущества перед стандартными анимациями jQuery: 

  1. Доступно гораздо больше параметров анимации, в т.ч. можно анимировать любое CSS свойство
  2. Меньшая нагрузка на процессор пользователя → большая отзывчивость интерфейса во время работы анимации
  3. CSS Transitons могут использовать видеокарту компьютера для аппаратного ускорения  → более плавные анимации
  4. Простые анимации возможны без использования JavaScript → больше пользователей увидит Вашу анимацию, а не статичную картинку
  5. Возможность fallback → для пользователей IE используются стандартные keyframe анимации jQuery

CSS анимации поддерживаются всеми современными броузерами, в т.ч. IE10: http://caniuse.com/css-transitions

Пример

Практически везде на этом сайте анимации выполнены через CSS Transitions.

Небольшое сравнение работы разных вариантов анимации Вы можете видеть ниже.

Обратите внимание, что в зависимости от Вашего броузера анимации могут выглядеть по-разному. В наших проектах мы стараемся обходить различные недостатки и недоработки броузеров, тут же это показано специально.

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

JavaScript Animation
 
CSS Transition
 
CSS Transition + Easing
 

Возможно, CSS3 анимации всё ещё не такие плавные и красивые, как хотелось бы, но они уже заметно лучше стандартных анимаций, и им ещё есть куда рости - разработчики броузеров продолжают доработки в этой области, и в ближайшем будущем разница станет ещё заметнее.