CSS3 дарит нам новые красивости и приятности. В некоторых случаях для создания какого-либо необычного эффекта больше не нужно прибегать к использованию flash и javascript. Свойство CSS transition является ярким примером одной из таких ситуаций. Думаю, всем известен псевдокласс:hover. При помощи него меняются значения CSS свойств элемента при наведении на него мышкой. К примеру, был блок серого цвета с черной надписью, навел на него мышкой, и он стал черным с белой надписью.
Вот, как это прописывается:
Blok { font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; text-align:center; } .blok:hover { background-color:#000000; color:#ffffff; }
А вот, как это выглядит:
Наведи на меня
Можно также сделать, чтобы блок при наведении на него, помимо цвета фона и цвета текста, менял также и ширину. Для этого запишем CSS код так:
Blok1 { font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; text-align:center; } .blok1:hover { background-color:#000000; color:#ffffff; width:355px; }
Вот, как это будет выглядеть в данном случае:
Наведи на меня
Все бы ничего, но, как видите, свойства меняют свои значения слишком резко, в тот же миг, и это выглядит не очень красиво. Что делать? Все очень просто: используем свойство CSS transition .
О свойстве transition
Свойство transition придает переходу от одних стилей к другим плавность. К примеру, цвет блока при наведении на него мышкой изменится не резко, а в течение определенного времени. Transition, кстати, в переводе на русский означает «переход». Свойство имеет следующую запись:
Div { transition:color 1s 1s linear; }
Вместо указанных значений естественно можно применить и другие. Большинство браузеров до сих пор не воспринимают данное свойство в его стандартном виде, поэтому необходимо использовать префиксы.
Div { transition:color 1s 1s linear; -moz-transition:color 1s 1s linear; -webkit-transition:color 1s 1s linear; -o-transition:color 1s 1s linear; }
В примерах был указан короткий вариант записи, подробный имеет следующий вид:
Div { transition-property:color; transition-duration:1s; transition-delay:1s; transition-timing-function:linear; -moz-transition-property:color; -moz-transition-duration:1s; -moz-transition-delay:1s; -moz-transition-timing-function:linear; -webkit-transition-property:color; -webkit-transition-duration:1s; -webkit-transition-delay:1s; -webkit-transition-timing-function:linear; -o-transition-property:color; -o-transition-duration:1s; -o-transition-delay:1s; -o-transition-timing-function:linear; }
В transition-property задается свойство, на которое будет распространяться действие перехода. К примеру: color, background-color, width, height, left, opacity, visibility и многие другие. Можно указать несколько свойств через запятую. Если вы хотите применить переход сразу для всех возможных свойств, тогда у transition-property следует указать значение all. В transition-duration указывается время, в течение которого будет осуществляться переход, в transition-delay время, через которое переход начнется. В transition-timing-function указывается тип перехода, на этом свойстве остановимся подробнее.
Подробнее о transition-timing-function
Свойство transition-timing-function определяет, как будут изменяться промежуточные значения в течение перехода, другими словами, как будет меняться скорость перехода в течение времени, которое задано в свойстве transition-duration. К примеру, переход может начаться быстро, но под конец замедлиться, или же не менять своей скорости в течение всего времени. Transition-timing-function может иметь следующие значения:
- linear — скорость перехода не меняется от начала и до конца. Эквивалентна cubic-bezier(0,0,1,1).
- ease — медленный старт, затем ускорение и замедление в конце. Эквивалентна cubic-bezier(0.25,0.1,0.25,1).
- ease-in — медленный старт. Эквивалентна cubic-bezier(0.42,0,1,1).
- ease-out — замедление в конце. Эквивалентна cubic-bezier(0,0,0.58,1).
- ease-in-out — медленный старт и финиш. Эквивалентна cubic-bezier(0.42,0,0.58,1).
- cubic-bezier(n,n,n,n) — позволяет задать собственные значения от 0 до 1.
Наведите на следующий блок мышкой и посмотрите сами, как осуществляется переход при той или иной функции.
Как видите, в зависимости от того, какое значение имеет свойство transition-timing-function, переход может осуществляться совершенно по-разному. Хотя иногда эта разница является не очень заметной, к примеру, если в transition-duration задано небольшое временное значение, или блок, для которого осуществляется эффект, имеет маленькие габариты и так далее.
Примеры использования свойства transition
Чтобы вам легче было разобраться, как правильно применять свойство transition, приведу несколько примеров. Начну, пожалуй, с самого простого. Помните блок с меняющейся шириной и цветом при наведении на него в самом начале поста? Давайте теперь сделаем тоже самое только с использованием свойства transition.
Пример 1.
Primer_1 { font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; text-align:center; transition:all 1s linear; -moz-transition:all 1s linear; -webkit-transition:all 1s linear; -o-transition:all 1s linear; } .primer_1:hover { background-color:#000000; color:#ffffff; width:355px; }
Наведи на меня
В примере была применена линейная функция, далее в посте буду использовать именно ее. Вы же естественно можете применять совершенно любую. В transition-property было использовано значение all, то есть все возможные свойства, а именно цвет фона, цвет текста и ширина, меняли свои значения в течение одинакового времени и с использованием одной и той же функции. Чтобы каждое свойство менялось по-разному, нужно прописывать их через запятую с разными значениями. Вот так:
Primer_1_1 { font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; text-align:center; transition:background-color 1s linear, color 1s 1s ease-in-out, width 1s 2s ease; -moz-transition:background-color 1s linear, color 1s 1s ease-in-out, width 1s 2s ease; -webkit-transition:background-color 1s linear, color 1s 1s ease-in-out, width 1s 2s ease; -o-transition:background-color 1s linear, color 1s 1s ease-in-out, width 1s 2s ease; } .primer_1_1:hover { background-color:#000000; color:#ffffff; width:355px; }
Наведи на меня
В данном случае все свойства меняли свои значения по очереди, начиная с цвета фона и заканчивая шириной. У каждого свойства была задана своя функция.
Пример 2.
С цветами и размерами разобрались. Теперь давайте сделаем исчезающий в движении блок.
Primer_2 { font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; text-align:center; opacity:1; transition:all 2s linear; -moz-transition:all 2s 0 linear; -webkit-transition:all 2s linear; -o-transition:all 2s linear; } .primer_2:hover { opacity:0; margin-left:50px; }
Наведи на меня
При помощи свойств opacity и margin-left блок движется и исчезает в течение двух секунд.
Пример 3.
Еще один простой пример. На этот раз у текста появляется тень белого цвета, хотя в данном случае она напоминает скорее подсветку, чем тень, но свойство называется именно так.
Primer_3 { font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; text-align:center; transition:text-shadow 1s linear; -moz-transition:text-shadow 1s 0 linear; -webkit-transition:text-shadow 1s linear; -o-transition:text-shadow 1s linear; } .primer_3:hover { text-shadow:0 0 15px #ffffff; }
Наведи на меня
Реализовали мы это при помощи свойства text-shadow.
Пример 4.
Немного усложним задачу, заставим блок крутиться.
Primer_4 { font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; text-align:center; transition:transform 1.5s linear; -moz-transition:-moz-transform 1.5s 0 linear; -webkit-transition:-webkit-transform 1.5s linear; -o-transition:-o-transform 1.5s linear; } .primer_4:hover { transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); }
Наведи на меня
Согласитесь, смотрится неплохо, и сразу даже не догадаешься, что это удалось сделать лишь посредством CSS. В примере, кстати, использовалось еще одно новое свойство transform. Многие браузеры читают его только при помощи вендорных префиксов. Обратите внимание, что их нужно указывать и в значении свойства transition. Обязательно подпишитесь на , чтобы узнать про свойство transform еще больше. Вскоре ему будет посвящена отдельная статья, как и многим другим свойствам.
Пример 5.
Свойство CSS transition, кстати, неплохо себя показывает и в сочетании с псевдоклассом:active. Блок в данном примере должен будет увеличиваться при нажатии и удержании на нем курсора мыши. Проверим?
Primer_5 { font-size:20px; background-color:#808080; color:#000000; width:325px; padding-top:18px; height:38px; cursor:pointer; text-align:center; transition:all 2s linear; -moz-transition:all 2s 0 linear; -webkit-transition:all 2s linear; -o-transition:all 2s linear; } .primer_5:active { width:375px; height:85px; }
Нажми и держи
Для реализации этого примера нужно было всего лишь увеличить значения ширины и высоты в блоке с псевдоклассом:active.
Способов использования свойства CSS transition на самом деле очень и очень много, уверен, в будущем их станет еще больше. Я привел лишь самые простые примеры, чтобы продемонстрировать transition в действии. Ссылки, кстати, на моем блоге меняют свой цвет при наведении на них мышкой именно при помощи него. Думаю, я вам порядком надоел серым прямоугольником, но зато на нем удалось отлично показать все, что я хотел. В сочетании с другими свойствами и графикой transition может вытворять очень красивые вещи. Пробуйте!
Дата добавления: 2011-10-16
Свойство transition относится к новым свойствам CSS3. Познакомимся с ним поближе.
Все мы привыкли, что при наведении мышкой изменяется цвет ссылки. При этом цвет меняется резко, без плавного перехода. Свойство transition позволит добавить небольшую анимацию при изменении цвета без использования JavaScript.
В спецификации к данному свойству говорится следующее:
CSS Transitions allow property changes in CSS values to occur smoothly over a specified duration.
Иными словами, CSS Transitions позволяют назначать изменения свойств CSS плавно и в течение некоторого времени.
Применять свойство transition можно к чему угодно - фону, цвету, длине, размеру шрифта и т.д. В основном это свойства, задающие цвет или свойства, которые могут быть выражены в единицах длины (px, em, ex) или в процентах. В качестве события мы так же можем использовать псевдоклассы:focus и:active.
Браузеры
Сразу скажу о браузерах - новый стандарт еще не принят, поэтому на данный момент необходимо использовать префиксы -webkit-, -moz- и -o-. Отсюда видно, что свойство поддерживают браузеры Chrome, Safari, Opera 10.5+, Firefox 4+. Наш "любимый" Internet Explorer как всегда не у дел, пользователь просто не увидит никакой анимации.
В этой статье я использовал префикс -webkit- , поэтому все приведенные здесь примеры будут работать только в Chrome и Safari.
Рассмотрим простой пример - добавим плавный переход фона ссылки
Для начала вспомним, как делается обычная смена цвета ссылки при наведении мышкой.
Теперь воспользуемся свойством CSS transition для плавной смены фона у ссылки. Создадим новый класс, который будет идентичен классу simple и добавим несколько новых строчек:
A.cool { padding: 5px 10px; background: #69f; color: #000; -webkit-transition-property: background; -webkit-transition-duration: 0.5s; -webkit-transition-timing-function: ease; } a.cool:hover { background: #33f; color: #fff; }
Создаем еще пару тестовых ссылок и посмотрим на результат:
Теперь наш фон плавно меняет цвет в течение полусекунды! Из примера видно, что мы добавили три новые строчки со свойствами -webkit-transition-property, -webkit-transition-duration, -webkit-transition-timing-function .
На самом деле, их можно объединить в одно свойство:
Webkit-transition: background 0.5s ease;
Также можно добавить плавное изменение цвета текста:
A.cool2 { padding: 5px 10px; background: #69f; color: #000; -webkit-transition: background 0.5s ease, color 1.0s ease; } a.cool2:hover { background: #33f; color: #fff; }
Данный код при наведении мышки будет плавно менять цвет фона в течение полусекунды и цвет шрифта в течение 1 секунды. Проверяем:
Если мы будем использовать одинаковые параметры для анимации, то можно использовать выражение: -webkit-transition: all 0.5s ease;
Теперь Transition-эффект будет применяться ко всем изменяющимся свойствам с одинаковыми параметрами - 0.5 секунд, ease-эффект.
Можно также добавить задержку для эффекта при помощи transition-delay :
A.cool3 { padding: 5px 10px; background: #69f; color: #000; -webkit-transition: all 0.5s ease; -webkit-transition-delay: 0.5s; } a.cool3:hover { background: #33f; color: #fff; }
Теперь анимация будет работать через полсекунды после наведения мышки. Проверим на всякий случай:
Справочная таблица
Чтобы лучше усвоить материал, предлагаю вашему вниманию небольшую справочную таблицу.
Transition-property Свойство, к которому применяем анимацию. Практически любое свойство CSS: color, background, width, font-size и т.д. transition-duration Длительность анимации. Время в секундах. transition-timing-function Временная функция, используемая для анимации: ease, linear, ease-in-out, ease-in, ease-out, cubic-bezier transition-delay Задержка анимации. Время в секундах.
CSS3-переходы позволяют анимировать исходное значение CSS-свойства на новое значение с течением времени, управляя скоростью смены значений свойств. Большинство свойств меняют свои значения за 16 миллисекунд, поэтому рекомендуемое время стандартного перехода — 200ms .
Смена свойств происходит при наступлении определенного события, которое описывается соответствующим псевдоклассом. Чаще всего используется псевдокласс:hover . Данный псевдокласс не работает на мобильных устройствах, таких как iPhone или Android. Универсальным решением, работающим в настольных и мобильных браузерах, будет обработка событий с помощью JavaScript (например, переключение классов при клике).
Переходы применяются ко всем элементам, а также к псевдоэлементам:before и:after . Для задания всех свойств перехода обычно используют краткую запись свойства transition .
CSS3-переходы могут применяться не ко всем свойствам и их значениям. Подробный перечень вы найдёте на странице.
Создание плавных изменений свойств элементов
Поддержка браузерами
IE: 10.0
Firefox: 16.0, 4.0 -moz-
Chrome: 26.0, 4.0 -webkit-
Safari: 6.1, 3.1 -webkit-
Opera: 12.1, 11.6 -o-
iOS Safari: 7.1
Opera Mini: —
Android Browser: 4.4, 4.1 -webkit-
Chrome for Android: 44
1. Название свойства transition-property
Содержит название CSS-свойств, к которым будет применен эффект перехода. Значение свойства может содержать как одно свойство, так и список свойств через запятую. При создании перехода можно использовать как начальное, так и конечное состояние элемента. Свойство не наследуется.
Создаваемые эффекты должны быть ненавязчивыми. Не все свойства требуют плавного изменения во времени, что связано с пользовательским опытом. Например, при наведении на ссылку мы хотим видеть мгновенную смену цвета ссылки или цвета и стиля подчёркивания. Поэтому переходы следует использовать для тех свойств, к которым действительно нужно привлечь внимание.
Синтаксис
Div { width: 100px; transition-property: width; } div:hover { width: 300px; }
2. Продолжительность перехода transition-duration
Задаёт промежуток времени, в течение которого должен осуществляться переход. Если разные свойства имеют разные значения для перехода, они указываются через запятую. Если продолжительность перехода не указана, то анимация при смене значений свойств происходить не будет. Свойство не наследуется.
Синтаксис
Div { transition-duration: .2s; }
3. Функция перехода transition-timing-function
Свойство задаёт временную функцию, которая описывает скорость перехода объекта от одного значения к другому. Если вы определяете более одного перехода для элемент, например, цвет фона элемента и его положение, вы можете использовать разные функции для каждого свойства. Свойство не наследуется.
| transition-timing-function | |
|---|---|
| Значения: | |
| ease | Функция по умолчанию, переход начинается медленно, разгоняется быстро и замедляется в конце. Соответствует cubic-bezier(0.25,0.1,0.25,1) . |
| linear | Переход происходит равномерно на протяжении всего времени, без колебаний в скорости. Соответствует cubic-bezier(0,0,1,1) . |
| ease-in | Переход начинается медленно, а затем плавно ускоряется в конце. Соответствует cubic-bezier(0.42,0,1,1) . |
| ease-out | Переход начинается быстро и плавно замедляется в конце. Соответствует cubic-bezier(0,0,0.58,1) . |
| ease-in-out | Переход медленно начинается и медленно заканчивается. Соответствует cubic-bezier(0.42,0,0.58,1) . |
| cubic-bezier(x1, y1, x2, y2) | Позволяет вручную установить значения от 0 до 1 для кривой ускорения. вы сможете построить любую траекторию перехода. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
Div { transition-timing-function: linear; }
Для создания более реалистичных анимаций используйте функцию cubic Bézier:
Рис. 1. Пользовательские функции cubic Bézier с сайта easings.net
| Пользовательское название | Значение функции |
|---|---|
| easeInSine | cubic-bezier(0.47, 0, 0.745, 0.715) |
| easeOutSine | cubic-bezier(0.39, 0.575, 0.565, 1) |
| easeInOutSine | cubic-bezier(0.445, 0.05, 0.55, 0.95) |
| easeInQuad | cubic-bezier(0.55, 0.085, 0.68, 0.53) |
| easeOutQuad | cubic-bezier(0.25, 0.46, 0.45, 0.94) |
| easeInOutQuad | cubic-bezier(0.455, 0.03, 0.515, 0.955) |
| easeInCubic | cubic-bezier(0.55, 0.055, 0.675, 0.19) |
| easeOutCubic | cubic-bezier(0.215, 0.61, 0.355, 1) |
| easeInOutCubic | cubic-bezier(0.645, 0.045, 0.355, 1) |
| easeInQuart | cubic-bezier(0.895, 0.03, 0.685, 0.22) |
| easeOutQuart | cubic-bezier(0.165, 0.84, 0.44, 1) |
| easeInOutQuart | cubic-bezier(0.77, 0, 0.175, 1) |
| easeInQuint | cubic-bezier(0.755, 0.05, 0.855, 0.06) |
| easeOutQuint | cubic-bezier(0.23, 1, 0.32, 1) |
| easeInOutQuint | cubic-bezier(0.86, 0, 0.07, 1) |
| easeInExpo | cubic-bezier(0.95, 0.05, 0.795, 0.035) |
| easeOutExpo | cubic-bezier(0.19, 1, 0.22, 1) |
| easeInOutExpo | cubic-bezier(1, 0, 0, 1) |
| easeInCirc | cubic-bezier(0.6, 0.04, 0.98, 0.335) |
| easeOutCirc | cubic-bezier(0.075, 0.82, 0.165, 1) |
| easeInOutCirc | cubic-bezier(0.785, 0.135, 0.15, 0.86) |
| easeInBack | cubic-bezier(0.6, -0.28, 0.735, 0.045) |
| easeOutBack | cubic-bezier(0.175, 0.885, 0.32, 1.275) |
| easeInOutBack | cubic-bezier(0.68, -0.55, 0.265, 1.55) |
4. Задержка перехода transition-delay
Необязательное свойство, позволяет сделать так, чтобы изменение свойства происходило не моментально, а с некоторой задержкой. Не наследуется.
Синтаксис
Div { transition-delay: .5s; }
5. Краткая запись перехода
Все свойства, отвечающие за изменение внешнего вида элемента, можно объединить в одно свойство transition
transition: transition-property transition-duration transition-timing-function transition-delay;
Если воспользоваться значениями по умолчанию, то запись
Div {transition: 1s;}
будет эквивалентна
Div {transition: all 1s ease 0s;}
6. Плавный переход нескольких свойств
Для элемента можно задать несколько последовательных переходов, перечислив их через запятую. Каждый переход можно оформить своей временной функцией.
Div {transition: background 0.3s ease, color 0.2s linear;}
Div { transition-property: height, width, background-color; transition-duration: 3s; transition-timing-function: ease-in, ease, linear; }
7. Примеры переходов для различных свойств
Наведите курсором мыши на блоки, чтобы увидеть свойства в действии.
Internet Explorer пока не поддерживает свойство transition.
Firefox 4 требует приставки -moz-.
Chrome и Safari требуют приставки -webkit-.
Opera требует приставки -o-.
Как это работает?
CSS3 переходы - это эффекты, которые позволяют элементу плавно изменять один стиль на другой.
Чтобы сделать это, вы должны указать две вещи:
- Указать свойство CSS, к которому вы хотите добавить эффект
- Определить продолжительность эффекта.
ПримерЭффект перехода для свойства width, продолжительность: 2 секунды:
|
Замечание: Если свойство duration не указано, плавный переход не произойдет, потому что значение по умолчанию равно 0.
Эффект начнется, когда указанное свойство CSS начнет изменяться. Обычно эффект перехода (плавного изменения CSS свойства) привязывают к моменту, когда пользователь перемещает мышь над элементом:
ПримерУказать:hover для элементов :
Замечание: Когда курсор мыши уходит за пределы области элемента, он плавно изменяется обратно к своему исходному стилю. Несколько ИзмененийЧтобы добавить эффект более чем к одному стилю, укажите несколько свойств, разделяя их запятыми:
|
Добавление в 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; }
А этот код создает кнопку, которая форматируется только что описанным стилем:
Чтобы получить плавное изменение цвета, т.е. переход, нам нужно в только что описанный стиль добавить свойство 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.