CSS3 переходы, трансформации и анимации

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

В настоящее время, если вам потребуется анимировать элементы на веб-странице, то вы, скорее всего, либо напишете собственный JavaScript-код, обеспечивающий выполнение требуемого действия, либо обратитесь к популярной JavaScript-библиотеке вроде jQuery, которой поручите всю тяжелую работу Однако разработчики, увлекающиеся CSS3, явно не согласны с засильем JavaScript в этой области и надеются, что ситуация вскоре изменится. Несмотря на то что версия CSS3 вряд ли узурпирует «власть» jQuery или чего-то в этом роде в ближайшее время, она идеально подходит для обеспечения плавных переходов (например, при наведении указателя мыши) и перемещения элементов по экрану Это отличная новость, поскольку она означает, что при увеличении количества замечательных современных браузеров, устанавливаемых на устройствах (например, на новейших смартфонах), мы можем использовать CSS для обеспечения анимаций вместо того, чтобы задействовать для этого JavaScript.

Вывод: вы, надо полагать, можете вычеркнуть пункт «научиться анимировать элементы с помощью jQuery» из своего списка текущих дел, поскольку уже знаете, что это можно сделать, используя только CSS. Как и всегда, CSS3-свойства не приведут к каким-либо отрицательным последствиям в устаревших браузерах. Такие браузеры будут просто пропускать непонятные им правила, как будто тех и нет вовсе.

В этой главе мы поговорим о следующем:

— что такое CSS3-переходы и как их можно использовать;

— как писать CSS3-переходы и их сокращенный синтаксис;

— как применять временные функции для контроля над плавностью выполнения CSS3-переходов (ease, cubic-bezier и др.);

— как устанавливать занятные переходы для адаптивных сайтов;

— что такое CSS3-трансформации и как мы можем их использовать;

— как добавлять разные 2D-трансформации (scale, rotate, skew, translate и др.);

— что такое 3D-трансформации и как их обеспечить;

— как добавить анимацию с помощью CSS3 (с использованием @keyframes).