CSS3 - переходы

Веб-программирование --- CSS3 --- Переходы

Представленные в данной статье примеры переходов вы можете протестировать на странице "Примеры переходов".

Добавление в CSS псевдоклассов сделало жизнь легче для всех веб-разработчиков. Теперь они могут создавать интерактивные эффекты с помощью псевдоклассов :hover и :focus, не прибегая к использованию сценариев JavaScript. Например, чтобы создать меняющуюся кнопку (т.е. кнопку, реагирующую на наведение курсора мыши), достаточно просто предоставить набор новых свойств стиля для псевдокласса :hover. Эти свойства задействуются автоматически, когда пользователь наводит курсор на кнопку.

Какими бы не были псевдоклассы замечательными, они больше не являются передовой технологией. Проблема с ними состоит в их характере типа "все или ничего". Например, настройки стиля псевдокласса :hover активируются сразу же при наведении курсора на элемент, т.е. происходит резкий скачок из одного стиля в другой. А вот в приложениях Flash, Silverlight или в прикладных программах эффект обычно более утонченный. Здесь кнопка при наведении курсора может менять цвет, сдвигаться или подсвечиваться, но делается это с использованием тонкой анимации, занимающей долю секунды.

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

Простой цветовой переход

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

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

Смену цвета без эффекта перехода можно реализовать следующим кодом:

.slickButton {
    color: white;
    font-weight: bold;
    padding: 10px;
    margin: 20px;
    border: solid 2px gray;
    background: lightgreen;
    cursor: pointer;
}

.slickButton:hover {
    color: black;
    background: yellow;
}

А этот код создает кнопку, которая форматируется только что описанным стилем:

<button class="slickButton">Простая кнопка!</button>

Чтобы получить плавное изменение цвета, т.е. переход, нам нужно в только что описанный стиль добавить свойство transition. (Обратите внимание, что это свойство вставляется в обычный стиль (в данном случае стиль slickButton), а не в псевдокласс :hover.)

Как минимум, свойство transition требует установки двух значений: свойства CSS, которое нужно анимировать, и времени, на протяжении которого нужно выполнить изменение стилей. В данном примере переход применяется к свойству background, а время перехода равно 0.5 секунды:

.slickButton {
    /* ... */
    -webkit-transition: background 0.5s;
    -moz-transition: background 0.5s;
    -o-transition: background 0.5s;
}

Как вы, несомненно, заметили, в предыдущем коде в стиль были добавлены три свойства transition, вместо обговариваемого одного. Это потому, что стандарт переходов CSS3 все еще находится в процессе разработки и поддерживающие его браузеры требуют применения префиксов разработчиков. Таким образом, чтобы переход работал в браузерах Chrome, Safari, Firefox и Opera, нужно установить три значения свойства transition, добавляя к каждому из них свой префикс разработчика. А для Internet Explorer 10 (который, как ожидается, будет поддерживать переходы) нужно будет добавить еще одну версию свойства, с префиксом -ms-. К сожалению, использование экспериментальных свойств может породить неопрятные таблицы стилей.

Так, в данном примере присутствует один мелкий недостаток, а именно, в активированной кнопке меняются два элемента оформления — цвет самой кнопки и цвет текста на ней. Но эффект перехода применяется только к цвету фона кнопки, в результате чего смена цвета текста происходит мгновенно, в то время как цвет фона кнопки меняется постепенно.

Эту проблему можно решить двумя способами. При первом подходе свойству transition присваивается список переходов, разделенных запятыми:

.slickButton {
    /* ... */
    -webkit-transition: background 0.5s, color 0.5s;
    -moz-transition: background 0.5s, color 0.5s;
    -o-transition: background 0.5s, color 0.5s;
}

Но этот код можно сократить, если нам нужно установить переход для всех изменяющихся свойств и при одинаковом времени перехода для них всех. В таком случае вместо списка свойств для перехода мы просто используем ключевое слово all:

.slickButton {
    /* ... */
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
}

На момент написания этих строк переходы поддерживались браузерами начиная с Opera 10.5 и Firefox 4, а также всеми версиями Safari и Chrome, с которыми вам когда-либо приходилось работать. Браузер Internet Explorer поддерживает переходы начиная с версии 10. Отсутствие поддержки переходов — не такая и большая проблема, как может показаться, т.к. браузер все равно меняет стили. Только эта смена происходит почти мгновенно, а не с растянутым во времени переходом. А это уже хорошая новость, т.к. веб-сайт может использовать переходы и в то же самое время сохранять основные визуальные стили для старых браузеров.

Задержка и комбинирование эффектов перехода

В эффектах перехода можно использовать свойство transition-delay, которое задерживает начало перехода на указанное время:

.slickButton {
    /* ... */
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    transition-delay: 2s;
}

Теперь анимация перехода при наведении указателя мыши будет задерживаться на две секунды. То же самое произойдет и при отведении указателя мыши. Значение свойства transition-delay можно указывать в самом свойстве transition, как необязательный параметр:

.slickButton {
    /* ... */
    -webkit-transition: all 0.5s 2s;
    -moz-transition: all 0.5s 2s;
    -o-transition: all 0.5s 2s;
    transition: all 0.5s 2s;
}

Этот код аналогичен предыдущему. Спецификация CSS3 позволяет комбинировать несколько эффектов перехода (с разной длительностью), как это было продемонстрировано с кнопкой. Вместо указания всех подробностей перехода в одном свойстве transition, можно использовать свойства transition-property (для указания анимируемого свойства) и transition-duration (для указания задержки):

.slickButton {
    /* ... */
    /* Устанавливаем видоизменяемые свойства */
    -webkit-transition-property: opacity, scale, background, color;
    -moz-transition-property: opacity, scale, background, color;
    -o-transition-property: opacity, scale, background, color;
    transition-property: opacity, scale, background, color;
	
	/* Устанавливаем время анимации */
	-webkit-transition-duration: 2s, 1.6s, 1s, 1s;
	-moz-transition-duration: 2s, 1.6s, 1s, 1s;
	-o-transition-duration: 2s, 1.6s, 1s, 1s;
	transition-duration: 2s, 1.6s, 1s, 1s;
}

.slickButton:hover {
    color: black;
    background: yellow;
    opacity: .4;
    -webkit-transform: scale(1.2,1.2);
    -moz-transform: scale(1.2,1.2);
    -o-transform: scale(1.2,1.2);
    transform: scale(1.2,1.2);
}

Это правило гораздо сложнее рассмотренных ранее. Во-первых здесь мы анимируем сразу 4 свойства указанные в transition-property. Во-вторых одним из анимируемых свойств является трансформация масштаба, которая позволяет при наведении курсора мыши на кнопку плавно увеличить ее в размерах, создавая очень красивый эффект.

Использование функций замедления

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

Функции замедления не являются каким-то инновационным средством CSS3, они уже давно используются в WPF и Silverlight (Инерционность движения).

Свойство transition-timing-function использует функцию cubic-bezier() для задания функции замедления через кривую Безье. Кривая Безье определяется двумя точками: начальное смещение и конечное смещение. Чтобы понять это давайте рассмотрим пример определения простой кривой Безье:

transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);

Этой функции соответствует следующий график:

Как видите здесь две точки с координатами (0.42, 0) и (0.58, 1) задают вид кривой Безье. Если вы укажите данную функцию замедления в предыдущем примере, то все эффекты перехода будут сначала выполняться чуть медленее, потом скорость будет больше и в конце перехода скорость снова уменьшится (согласно графику).

Понимание логики построения кривых Безье позволяет создавать практически бесконечное разнообразие пользовательских функций смягчения для анимаций CSS3. Есть даже возможность задавать отрицательные значения или значения, превышающие 1, для создания чрезвычайно кривых смягчений, например:

transition: all 2000ms cubic-bezier(0.280, -0.315, 0.685, 1.390);

Опробуйте этот эффект на примере кнопки, гарантирую, результат вам понравиться.

В свойстве transition-timing-function можно использовать несколько стандартных значений, которые определяют некоторые значения функции cubic-bezier:

Стандартные значения функций кривых Безье, используемые в свойстве transition-timing-function

Значение	График	Функция cubic-bezier()	Описание
linear		0, 0, 1, 1	Немедленный старт и остановка, анимация происходит с постоянной скоростью
easy		0.25, 0.1, 0.25, 1	Быстрый старт и быстрое ускорение, медленный переход с замедлением в конце
ease-in		0.42, 0, 1, 1	Медленный старт с нарастающим ускорением и резкой остановкой в конце
ease-out		0, 0, 0.58, 1	Обычный старт с замедлением в конце
ease-in-out		0.42, 0, 0.58, 1	Медленный старт с небольшим ускорением, скорость перехода постоянная, в конце происходит замедление

Шаги анимации

Кроме функций замедления, элемент можно анимировать используя шаги, т.е. ступенчато. (Примером может послужить секундная стрелка часов, которая сначала двигается, а затем осуществляется задержка на 1 секунду, потом снова двигается и снова задержка и т.д.) Шаги задаются с помощью функции steps(). Ниже показан пример:

transition: all 2000ms steps(3, end);

Теперь анимация увеличения кнопки будет проходить рывками. Задержка между рывками в данном случае будет 667ms (2000/3). Второй параметр функции steps указывает, будет ли рывок выполняться сразу или после задержки:

Значения функции steps

Функция	График	Описание
steps(3)		Пауза возникает при запуске анимации. (Эта функция соответствует steps(3, end), т.к. значение end используется по умолчанию.)
steps(3, end)		Пауза возникает при запуске анимации.
steps(3, start)		Анимация запускается сразу, пауза появляется в конце.