Понятие временных функций

Большинство свойств, к которым применяется эффект перехода, не требуют пояснения. Мы рассмотрели свойства, к которым можно (или нужно!) применить такой эффект. Длительность и задержки задаются в секундах (например, 2s), поэтому в них довольно легко разобраться, однако временные функции могут вас озадачить. Что именно делают ease, linear, ease-in, ease-out, ease-in-out и cubic-bezier? Каждая из этих функций в действительности позволяет «рисовать» кубическую кривую Безье, — по сути, делает то же самое, что и функция замедления. Я понимаю, что все это, возможно, вам тоже не о многом говорит. Поэтому я рекомендую вам заглянуть по адресу http://cubic-bezier.com/ (рисунок 7.3).

На этом сайте вы сможете сравнить временные функции и увидеть, чем каждая из них отличается от других. Однако, даже если вы умеете «с завязанными глазами» создавать свои собственные кубические кривые Безье (и при этом считать в обратном направлении от тысячи по-китайски), существует вероятность, что в большинстве практических ситуаций это не будет иметь особого значения. И вот почему….

Как и любое усовершенствование, эффекты перехода необходимо применять искусно. При практической реализации переходы, длящиеся слишком долго, имеют тенденцию создавать у пользователей впечатление, что сайт работает медленно. Например, навигационные ссылки, для которых переход длится 5 секунд, скорее вызовут у ваших пользователей раздражение, нежели заставят их воскликнуть: «Ух ты!» Следовательно, если только не будет убедительных причин поступить по-другому, использование перехода по умолчанию (ease), длящегося короткий промежуток времени (я предпочитаю такой, что длится максимум 1 секунду), зачастую будет наилучшим решением.

Сайт, демонстрирующий возможности временных функций.

Занятные переходы для адаптивных сайтов.

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

По адресу http://css-tricks.com располагается отличный сайт Криса Койера (Chris Coyier), где обсуждаются CSS-методики. Однажды, внеся изменения в дизайн, я поменял размеры окна браузера и понимающе улыбнулся, когда увидел, как для разных экранных элементов быстро выполнился занятный переход. К какой магии прибег Крис, чтобы добиться такого эффекта? К чему-то вроде следующего:

* {

Transition: all 1s;

}

Здесь используется универсальный CSS-селектор * для выбора всех элементов, после чего задается переход для этих элементов (all) длительностью 1 секунда (1s). Поскольку здесь не указана временная функция, ease станет использоваться по умолчанию, и не будет никаких задержек, так как предполагается, что они отсутствуют, если специально не указать альтернативное значение. Результат? Что ж, поведение большинства объектов (ссылок, выделенных состояний и т. п.) будет таким, как вы ожидаете. Однако, поскольку переход осуществляется для всех элементов, также задействуются любые правила в медиазапросах, чтобы при изменении размеров окна браузера элементы как бы перетекали из одного состояния в другое. Важно ли это? Абсолютно нет! Забавно ли наблюдать такой эффект и «играть» с ним? Безусловно!