CSS Transitions: описание, свойства и особенности использования

Создать хороший сайт сегодня просто: специалистов достаточно, активно идут процессы совершенствования функционала и его представления (структуры и содержания). К последнему относится дизайн средствами CSS - как наиболее простое, экономичное и эффективное решение.

Борьба между разработчиками за заказчика, а владельцев сайтов за интерес посетителей и посещаемость ресурсов переместилась в сферу тонкой рекламы и мягкого (теплого и динамичного) контента.

Место переходов CSS

По сложившемуся мнению, место CSS Transitions в псевдокласе :hover и обратно. Есть стиль тега, например TagStyle, и есть стиль TagStyle:hover. Задача псевдокласса - поместить содержимое всех правил второго описания в первое, как только мышка окажется над тегом, а как только она уйдет - вернуть все обратно.

В такой схеме (в классическом варианте) обычно менялись цвета фона, цвета текста, рамка, ее закругления, отступы и прочие видимые элементы. Использование правила CSS Transitions позволяет это сделать плавно и управлять плавностью.

Правило может менять множество других элементов, но обычно используются указаные. Полный перечень правил, на которые влияет свойство Transition CSS, можно найти на официальных ресурсах в интернете.

Содержание правила перехода

Задача правила: выполнить плавный переход других правил из одного состояние в другое, поэтому CSS Transitions включает в себя (transition='*'):

• наименование свойства, на которое влияет (*-property);
• длительность процесса (*-duration);
• функцию перехода (*-timing-function);
• задержку начала процесса (*-delay).

Допускается короткая запись правила по канонам CSS:

• transition: all 1s ease .5s;

Переход применяется ко всем правилам, выполняется за одну секунду в стиле 'ease' с задержкой в полсекунды. Все то же самое, записанное по элементам правила:

• *-property: all;
• *-duration: 1s;
• *-timing-function: ease;
• *-delay: .5s;

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

Классическое применение

Самое простое и часто используемое - это переход цвета фона (символа): CSS Transition: background:

В этом примере только к правилу background-color будет применено правило перехода (длительность 2 секунды, функция ease-out, задержка 0.2 секунды), а остальные правила перейдут в другое состояние моментально.

Функция (стиль) перехода

Важная составляющая правила CSS Transitions - функция перехода, то есть кривая времени, как выполнять переход из одного состояния в другое. Плавный вариант (easy) - это значение по умолчанию: переход начинается медленно, разгоняется и замедляется в конце.

Значение 'linear' определяет равномерный переход: 'ease-in' - начинает переход медленно, затем плавно ускоряется к конце, а 'ease-out' - действует наоборот.

Функция cubic-bezier (x1, y1, x2, y2) позволяет создать свой вариант перехода, но воспользоваться официальными ресурсами и сайтами, имеющими хороший опыт использования кривой Безье, все же предпочтительнее. Что-то новое придумать наверняка не получится, а опыт приятных глазу и психологии посетителя вариантов накоплен все же немалый.

Совмещение перехода с преобразованием

Хороший эффект дает комбинация правил CSS Transition & Transform. Первое определяет время процесса, второе показывает, что делать все это время.

Преобразования позволяют перемещать теги, вращать их, изменять размеры, менять позицию. Рассмотрим комбинацию:

• transform: rotate(180deg);
  • transition: all 2s ease-out .2s;

За две секунды она перевернет содержимое тега на 180 градусов. Эксперементируя с функциями translate, scale, rotate, skew и их вариациями, можно достичь интересных эффектов и придать своей работе неповторимую оригинальность.

CSS3 позволяет также выполнять преобразование 3d, то есть перемещать тег в координатах xyz, что в сочетации с CSS Transitions позволяет вращать тексты и фигуры, как это необходимо для достижения поставленной цели.

Совместимость с правилом перехода

Если использовать CSS Transitions для background, border, color и других очевидно визуальных правил нормально, естественно и удобно, то для некоторых случаев, например, попытки совместить CSS Transition & Display, можно просто потратить время и не достичь желаемого.

Вообще говоря, планируя использование визуальных эффектов, рекомендуется выделять «видимое от верстаемого». Сделать красивое вращение фигуры или текста в течение определенного времени - действие, которое имеет малое отношение к тому, что дает свойство display, visibility, z-index. Однако если последние два четко прописаны в списке правил, к которым имеет отношение CSS Transition, то первое не упоминается, хотя его использование привносит в тег что-то заметное, но слабо управляемое.

Правило перехода - это не только :hover и обратно, его можно с успехом применить и к другим псевдоклассам, например :focus или :active.

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

О ненормальном и естественном

На заре персональных компьютеров, когда для математических вычислений выпускался математический процессор, было ненормально иметь 386-й компьютер без математического сопроцессора, когда речь шла об эффективном применении Fortran-программы для расчета пути на Луну. Естественно, сегодня никому в голову не приходит, покупая компьютер, спрашивать имеет ли он аппаратно реализованные средства для математических вычислений.

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

А CSS - по определению, таблица каскадных стилей, причем с моментами наследования, с учетом мобильных девайсов, с приоритетами, комбинациями.

Но мир так быстро меняется. Сегодня математикой иную формулу и не назовешь, потому что понятие числа на современном языке программирования мало чем отличается от понятия строки.

Но если всех это устраивает, если это удобно и эффективно, то, быть может, имеет смысл изменить собственные представления. Видимо, именно CSS Transition & Transform сделают такую маленькую революцию: не нужно программировать то, что уже давно не нуждается в этом. Программисты с давних пор страдают болезнью профессии, которая отличается следующим: переписывать не только то, что делали до них другие под очередную задачу, но даже то, что они сами делали вчера. Что делать, мир и технологии изменчивы, а даже мелкие метаморфозы в области применения иногда приводят к необходимости значительных изменений кода.

Тем не менее такая трансформация математических алгоритмов в красивые и удобные правила CSS очень практична и эффективна.