Css3 переходы. Простой цветовой переход
Дата добавления: 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 дарит нам новые красивости и приятности. В некоторых случаях для создания какого-либо необычного эффекта больше не нужно прибегать к использованию 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 может вытворять очень красивые вещи. Пробуйте!
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. Примеры переходов для различных свойств
Наведите курсором мыши на блоки, чтобы увидеть свойства в действии.
CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time. For example, if you change the color of an element from white to black, usually the change is instantaneous. With CSS transitions enabled, changes occur at time intervals that follow an acceleration curve, all of which can be customized.
Animations that involve transitioning between two states are often called implicit transitions as the states in between the start and final states are implicitly defined by the browser.
CSS transitions let you decide which properties to animate (by listing them explicitly ), when the animation will start (by setting a delay) , how long the transition will last (by setting a duration ), and how the transition will run (by defining a timing function , e.g. linearly or quick at the beginning, slow at the end).
Which CSS properties can be transitioned?
The Web author can define which property has to be animated and in which way. This allows the creation of complex transitions. As it doesn"t make sense to animate some properties, the list of animatable properties is limited to a finite set.
Note: The set of properties that can be animated is changing as the specification develops.
The auto value is often a very complex case. The specification recommends not animating from and to auto . Some user agents, like those based on Gecko, implement this requirement and others, like those based on WebKit, are less strict. Using animations with auto may lead to unpredictable results, depending on the browser and its version, and should be avoided.
Defining transitions
CSS Transitions are controlled using the shorthand transition property. This is the best way to configure transitions, as it makes it easier to avoid out of sync parameters, which can be very frustrating to have to spend lots of time debugging in CSS.
You can control the individual components of the transition with the following sub-properties:
(Note that these transitions loop infinitely only for the purpose of our examples; CSS transition s only visualize a property change from start to finish. If you need visualizations that loop, look into the CSS animation property.)
transition-property Specifies the name or names of the CSS properties to which transitions should be applied. Only properties listed here are animated during transitions; changes to all other properties occur instantaneously as usual. transition-duration Specifies the duration over which transitions should occur. You can specify a single duration that applies to all properties during the transition, or multiple values to allow each property to transition over a different period of time.transition-duration: 0.5s
transition-duration: 1s
transition-duration: 2s
transition-duration: 4s
Specifies a function to define how intermediate values for properties are computed. Timing functions
determine how intermediate values of the transition are calculated. Most timing functions can be specified by providing the graph of the corresponding function, as defined by four points defining a cubic bezier. You can also choose easing from Easing Functions Cheat Sheet .
transition-timing-function: ease
transition-timing-function: linear
transition-timing-function: step-end
transition-timing-function: steps(4, end)
transition-delay: 0.5s
transition-delay: 1s
transition-delay: 2s
transition-delay: 4s
The shorthand CSS syntax is written as follows:
Div {
transition:
Examples
Simple example
This example performs a four-second font size transition with a two-second delay between the time the user mouses over the element and the beginning of the animation effect:
#delay { font-size: 14px; transition-property: font-size; transition-duration: 4s; transition-delay: 2s; } #delay:hover { font-size: 36px; }
Multiple animated properties example
HTML Content
The box below combines transitions for: width, height, background-color, transform. Hover over the box to see these properties animated.
CSS Content
.box { border-style: solid; border-width: 1px; display: block; width: 100px; height: 100px; background-color: #0000FF; transition: width 2s, height 2s, background-color 2s, transform 2s; } .box:hover { background-color: #FFCCCC; width: 200px; height: 200px; transform: rotate(180deg); }When property value lists are of different lengths
If any property"s list of values is shorter than the others, its values are repeated to make them match. For example:
Div { transition-property: opacity, left, top, height; transition-duration: 3s, 5s; }
This is treated as if it were:
Div { transition-property: opacity, left, top, height; transition-duration: 3s, 5s, 3s, 5s; }
Similarly, if any property"s value list is longer than that for transition-property , it"s truncated, so if you have the following CSS:
Div { transition-property: opacity, left; transition-duration: 3s, 5s, 2s, 1s; }
This gets interpreted as:
Div { transition-property: opacity, left; transition-duration: 3s, 5s; }
Using transitions when highlighting menus
A common use of CSS is to highlight items in a menu as the user hovers the mouse cursor over them. It"s easy to use transitions to make the effect even more attractive.
Before we look at code snippets, you might want to take a look at the live demo (assuming your browser supports transitions).
First, we set up the menu using HTML:
Then we build the CSS to implement the look and feel of our menu. The relevant portions are shown here:
A { color: #fff; background-color: #333; transition: all 1s ease-out; } a:hover, a:focus { color: #333; background-color: #fff; }
This CSS establishes the look of the menu, with the background and text colors both changing when the element is in its :hover and :focus states.
JavaScript examples
Care should be taken when using a transition immediately after:
- adding the element to the DOM using .appendChild()
- removing an element"s display: none; property.
This is treated as if the initial state had never occurred and the element was always in its final state. The easy way to overcome this limitation is to apply a window.setTimeout() of a handful of milliseconds before changing the CSS property you intend to transition to.
Using transitions to make JavaScript functionality smooth
Transitions are a great tool to make things look much smoother without having to do anything to your JavaScript functionality. Take the following example.
Click anywhere to move the ball
Using JavaScript you can make the effect of moving the ball to a certain position happen:
Var f = document.getElementById("foo"); document.addEventListener("click", function(ev){ f.style.transform = "translateY("+(ev.clientY-25)+"px)"; f.style.transform += "translateX("+(ev.clientX-25)+"px)"; },false);
With CSS you can make it smooth without any extra effort. Simply add a transition to the element and any change will happen smoothly:
P { padding-left: 60px; } #foo { border-radius: 50px; width: 50px; height: 50px; background: #c00; position: absolute; top: 0; left: 0; transition: transform 1s; }
Detecting the start and completion of a transition
propertyName A string indicating the name of the CSS property whose transition completed. elapsedTime A float indicating the number of seconds the transition had been running at the time the event fired. This value isn"t affected by the value of transition-delay .Последнее обновление: 01.05.2016
Переход (transition) представляет анимацию от одного стиля к другому в течение определенного периода времени.
Для создания перехода необходимы прежде всего два набора свойств CSS: начальный стиль, который будет иметь элемент в начале перехода, и конечный стиль - результат перехода. Так, рассмотрим простейший переход:
Итак, здесь анимируется свойство background-color элемента div. При наведении указателя мыши на элемент он будет менять цвет с серого на красный. А при увеении указателя мыши с пространства элемента будет возвращаться исходный цвет.
Чтобы указать свойство как анимируемое, его название передается свойству transition-property
Transition-property: background-color;
Вообще анимировать можно множество разных свойств, такие как color, background-color, border-color. Полный список свойств CSS, которые поддаются анимации, можно найти по адресу www.w3.org/TR/css3-transitions/#animatable-properties
Transition-duration: 2s;
Кроме секунд можно устанавливать значения в миллисекундах, например, 500 миллисекунд:
Transition-duration: 500ms;
И в конце нам надо определить инициатор действия и финальное значение анимируемого свойства background-color. Инициатор представляет действие, которое приводит к изменению одного стиля на другой. В CSS для запуска перехода можно применять псевдоклассы. Например, здесь для создания перехода используется стиль для псевдокласса:hover . То есть при наведении указателя мыши на элемент div, будет срабатывать переход.
Кроме псевдокласса:hover можно использовать и другие псевдоклассы, например, :active (ссылка в нажатом состоянии) или:focus (получение элементом фокуса).
Также для запуска перехода можно использовать код JavaScript.
Анимация набора свойств
При необходимости мы можем анимировать сразу несколько свойств CSS. Так, в выше приведенном примере изменим стили следующем образом:
Div{ width: 100px; height: 100px; margin: 40px 30px; border: 1px solid #333; background-color: #ccc; transition-property: background-color, width, height, border-color; transition-duration: 2s; } div:hover{ background-color: red; width: 120px; height: 120px; border-color: blue; }
Здесь анимируются сразу четыре свойства. Причем анимация для них всех длится 2 секунды, но мы можем для каждого свойства задать свое время:
Transition-property: background-color, width, height, border-color; transition-duration: 2s, 3s, 1s, 2s;
Подобно тому как в свойстве transition-property через запятую идет перечисление анимируемых свойств, в свойстве transition-duration идет перечисление через запятую временных периодов для анимации этих свойств. Причем сопоставление времени определенному свойству идет по позиции, то есть свойство width будет анимироваться 3 секунды.
Кроме перечисления через запятую всех анимируемых свойств мы можем просто указать ключевое слово all :
Transition-property: all; transition-duration: 2s;
Теперь будут анимироваться все необходимые свойства, которые меняют значения в стиле для псевдокласса:hover .
Функции анимации
Свойства transition-timing-function позволяет контролировать скорость хода и выполнение анимации. То есть данное свойство отвечет за то, как и в какие моменты времени анимация будет ускоряться или замедляться.
В качестве значения это свойство может принимать одну из функций:
linear : линейная функция плавности, изменение свойства происходит равномерно по времени
ease : функция плавности, при которой анимация ускоряется к середине и замедляется к концу, предоставляя более естественное изменение
ease-in : функция плавности, при которой происходит только ускорение в начале
ease-out : функция плавности, при которой происходит только ускорение в конце анимации
ease-in-out : функция плавности, при которой анимация ускоряется к середине и замедляется к концу, предоставляя более естественное изменение
cubic-bezier : для анимации применяется кубическая функция Безье
Применим функцию ease-in-out:
Для использования кубической Безье в функцию cubic-bezier необходимо передать ряд значений:
Transition-timing-function: cubic-bezier(.5, .6, .24, .18);
Задержка перехода
Свойство transition-delay позволяет определить задержку перед выполнением перехода:
Transition-delay: 500ms;
Временной период также указывается в секундах (s) или миллисекундах (ms).
Свойство transition
Свойство transition представляет сокращенную запись выше рассмотренных свойств. Например, следующее описание свойств:
Transition-property: background-color; transition-duration: 3s; transition-timing-function: ease-in-out; transition-delay: 500ms;
Будет аналогично следующей записи:
Transition: background-color 3s ease-in-out 500ms;
Поиск
Мы можем оповещать вас о новых статьях,