HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд. - Фрэйн .

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

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

• как создать код CSS3-перехода и что собой представляет его сокращенный синтаксис;

• что такое функции развития процесса CSS3-перехода во времени (ease, cubic-bezier и т. д.);

• как можно развлечься с переходами на адаптивных сайтах;

• что такое CSS3-преобразования и как ими можно воспользоваться;

• что представляют собой различные 2D-преобразования (scale, rotate, skew, translate и т. д.);

• что такое 3D-преобразования;

• как средствами CSS3 осуществлять анимацию, используя keyframes.

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

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

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

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

совет

Сначала нужно предупредить вас о двух весьма важных обстоятельствах. Во-первых, переход от состояния display: none; невозможен. Если для элемента установлено свойство display: none;, то его прорисовка на экране отсутствует, следовательно, отсутствует и реальное состояние, с которого можно было бы осуществить переход. Чтобы создать процесс постепенного появления элемента, нужно задавать переход в отношении непрозрачности или позиции элемента. Во-вторых, не все свойства подвергаются переходам. Чтобы убедиться в том, что вы не пытаетесь добиться невозможного, обратитесь к перечню доступных для переходов свойств, который можно найти по адресу http://www.w3.org/TR/css3-transitions/.

Если открыть файл из каталога example_08-01, то в нем, в контейнере nav, можно увидеть несколько ссылок. Разметка имеет следующий вид:

<nav>

    <a href="#">link1</a>

    <a href="#">link2</a>

    <a href="#">link3</a>

    <a href="#">link4</a>

    <a href="#">link5</a>

</nav>

А вот соответствующий ей код CSS:

a {

    font-family: sans-serif;

    color: #fff;

    text-indent: 1rem;

    background-color: #ccc;

    display: inline-flex;

    flex: 1 1 20%;

    align-self: stretch;

    align-items: center;

    text-decoration: none;

    transition: box-shadow 1s;

}

a + a {

    border-left: 1px solid #aaa;

}

a:hover {

    box-shadow: inset 0 -3px 0 #CC3232;

}

И два состояния: первое, исходное.

И второе, при наведении указателя мыши.

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

transition: box-shadow 1s;

добавит к блочной тени переход от обычного состояния к состоянию наведения указателя за одну секунду.

совет

В предыдущем примере кода CSS можно заметить использование селектора примыкающего одноуровневого элемента +. Это означает, что заключенные в него стили будут применены в том случае, если за одним выбранным тегом (в нашем случае это <a>) тут же следует другой выбранный тег (еще один тег <a>). Здесь этот селектор применяется из тех соображений, что левая граница у первого элемента нам не нужна.

Учтите, что свойство перехода применяется в CSS к исходному состоянию элемента, а не к тому состоянию, в котором он в конечном итоге окажется. Короче говоря, объявление перехода применяется не к конечному, а к начальному состоянию. Это объясняется тем, что различные состояния, такие как :active, также могут иметь различные стилевые установки и подвергаться такому же переходу.

Свойства перехода

При объявлении перехода можно воспользоваться четырьмя свойствами:

• transition-property — название CSS-свойства, подвергаемого переходу (например, background-color, text-shadow или название любого другого доступного для применения переходов свойства);

• transition-duration — время, за которое должен произойти переход (определенное в секундах, например .3s, 2s или 1.5s);

• transition-timing-function — порядок изменения скорости в процессе перехода (например, ease, linear, ease-in, ease-out, ease-in-out или cubic-bezier);

• transition-delay — дополнительное значение для указания задержки до начала перехода. Как вариант, может использоваться отрицательное значение для немедленного начала перехода, но уже с того момента, до которого переход дошел бы за указанное время. Определяется в секундах, например .3s, 1s или 2.5s.

Используемые по отдельности различные свойства могут быть задействованы для создания следующего перехода:

.style {

    /*...(дополнительные стилевые настройки)...*/

    transition-property: all;

    transition-duration: 1s;

    transition-timing-function: ease;

    transition-delay: 0s;

}

Краткая форма записи перехода с помощью свойства transition

Показанные ранее отдельные объявления можно свести в одну краткую форму:

transition: all 1s ease 0s;

Но при этом следует сделать одно важное замечание: при записи краткой версии первое значение, связанное со временем, всегда применяется для свойства transition-duration. Второе значение, также связанное со временем, относится к свойству transition-delay. Я склоняюсь к использованию именно сокращенной формы, поскольку обычно мне нужно лишь определить продолжительность перехода и те свойства, к которым он должен быть применен.

Конечно, это мелочь, но постарайтесь указывать только то свойство или свойства, к которым действительно нужно применить переход. Безусловно, удобно установить значение all, имея в виду все свойства, но если переход нужен применительно лишь к непрозрачности, то свойству transition нужно указать только opacity. В противном случае браузер будет перегружен ненужной работой. В большинстве случаев это не создаст проблем, но если питать надежды на получение от сайта наивысшей производительности, особенно на не самых новых устройствах, то тут пригодится любая мелочь.

совет

Переходы пользуются весьма широкой поддержкой, но, как всегда, не поленитесь установить такое средство, как Autoprefixer, чтобы добавить префиксы производителей, нужные браузерам, от которых требуется поддержка вашего сайта. Можно также зайти на сайт caniuse.com и проверить, какие возможности какими браузерами поддерживаются.

Короче говоря, переходы и 2D-преобразования работают практически везде, кроме IE9 и более ранних версий, 3D-преобразования работают везде, кроме IE9 и более ранних версий, Android 2.3 и более ранних версий и Safari 3.2 и более ранних версий.

Переходы различных свойств за разные периоды времени

Когда в правиле содержатся несколько объявленных свойств, то не обязательно реализовывать переходы их всех за одно и то же время. Рассмотрим следующее правило:

.style {

    /* ...( дополнительные стилевые настройки)... */

    transition-property: border, color, text-shadow;

    transition-duration: 2s, 3s, 8s;

}

Здесь с помощью объявления transition-property указаны свойства, подвергаемые переходу: border, color и text-shadow. А затем с помощью объявления transition-duration указано, что свойство border будет подвергнуто переходу за две секунды, color — за три секунды, а text-shadow — за восемь секунд. Указания продолжительностей переходов, разделенные запятыми, соответствуют порядку указания подвергаемых переходу свойств, при перечислении которых в качестве разделителей также применялись запятые.

Основные сведения о функциях развития процесса по времени

Понять при объявлении перехода, что такое свойства, продолжительность и задержка, нетрудно. Но вот понять, что делает каждая функция развития процесса по времени, намного труднее. Чем же занимаются ease, linear, ease-in, ease-out, ease-in-out и cubic-bezier? Каждая из них фактически является предопределенной кривой Безье третьего порядка (cubic-bezier curve) и, по сути, аналогична функции плавности. Или, проще говоря, является математическим описанием того, как должен выглядеть процесс перехода. Нагляднее будет показать эти кривые, поэтому я рекомендую вам заглянуть по адресам http://cubic-bezier.com/ и http://easings.net/.