CSS-Transitions без использования :hover
До недавнего времени, наиболее распространенным вариантом использования CSS-transitions – было сочетание его с хорошо известным псевдо-классом CSS :hover .
Далее представлен наиболее простой пример изменения цвета ссылки, при наведении мыши, выполненный на чистом CSS:
Этот код запустит анимацию свойства color. когда вы подведете мышь к ссылке. Наверняка этот простой пример не раз попадался вам на разных сайтах, но это не значит, что transitions ограничивается использованием псевдо-класса :hover .
С помощью transitions. вы можете анимировать различные CSS-свойства, используя определенные CSS-приемы. Некоторые из этих приемов, (включая демо-версию каждого) приведены в сегодняшней статье.
Transitions с использованием :active
Псевдо-класс :active применяется к любому элементу, находящемуся в процессе активации. Основным способом “активации” элемента, является щелчок мышью или нажатие кнопки мыши.
Далее представлен CSS-пример, демонстрирующий использование :active совместно с CSS3-transitons, для имитации события mousedown :
Подведите курсор мыши к блоку и нажмите кнопку, вы увидите как высота и ширина блока анимируются, становясь больше, пока вы держите кнопку нажатой. Стоит вам отпустить кнопку, и размеры блока плавно вернутся к исходному значению.
Transitions с использованием :focus
Вы можете использовать псевдо-класс :focus. для получения эффекта, описанного в предыдущем примере. В этот раз мы используем форму, и анимируем ширину любого элемента формы, получившего фокус:
Transitions с использованием :checked
Вы можете анимировать чекбоксы и радиобаттоны, когда они становятся отмеченными – хотя, тут есть некоторые ограничения, поскольку вы не можете изменить их родную стилизацию.
Поэтому, мы сделаем простое изменение ширины, которое будет появляться в качестве подтверждения отметки текущего элемента:
Transitions с использованием :disabled
Продолжая тему стилизации веб-форм, в этот раз мы комбинируем css3-transitions с jQuery, для запуска анимации фонового цвета элементов формы, при их отключении через атрибут disabled :
И немного jQuery, чтобы удалять/добавлять атрибут disabled:
Итак, если отмечен последний из радиобаттонов (тот, что со значением “Другое”), у текстового поля удаляется атрибут disabled. при отметке остальных радиобаттонов, атрибут disabled, заново применяется к текстовому полю.
Псевдо-класс :disabled применяется к элементу, имеющему одноименный атрибут, поэтому анимация будет срабатывать всякий раз при удалении или добавлении этого атрибута.
Transitions с использованием Медиа-запросов
Последний пример, возможно, наименее полезный из всех, поскольку, давайте смотреть правде в глаза, единственные люди, изменяющие размер окна браузера, чтобы посмотреть что получится – это веб-разработчики.
Тем не менее, это еще один способ использования CSS3-transitions. Такой прием используется на сайте modernizr. com .
Этот пример одновременно анимирует два свойства, разделенных запятой. Медиа-запрос велит блоку уменьшиться, если размер экрана становится меньше 961 пикселя.
Измените размер окна демонстрационной страницы, чтобы увидеть как это работает.
Несколько замечаний относительно примеров кода
В каждом фрагменте кода, стандартное название css3-свойства включено последним, несмотря на то, что пока не один из известных мне браузеров не поддерживает его в этом виде.
Кроме того, добавлен префикс – ms, и хотя IE8 и IE9 не поддерживают transitions, но эта поддержка очевидно будет добавлена в версии IE10.
А еще, примеры кода, которые вы видели в статье намеренно упрощены, в сравнении с теми, что используются на демо-страницах, для того чтобы сфокусироваться только на тех частях, которые мы обсуждали в статье.