Поддержка сайта

Высокие позиции в поисковой системе, на прямую зависят от развития вашего сайта.

Продвижение сайтов

Эффективность стратегий продвижения подтверждается сотрудничеством с крупными клиентами и отзывами о нашей работе.

Создание сайтов

Мы делаем сайты быстро, недорого и профессионально. От работы с нами, у вас останутся только положительные эмоции.

transition-duration

.

transition-duration

Свойство transition-duration определяет, как долго будет продолжаться переход. Продолжительность может быть определена в секундах (s) или миллисекундах (ms). Мы хотим, чтобы наша анимация была действительно быстрой, поэтому продолжительность ограничим 0,2 секунды (200 мс):

transition-duration

Теперь, когда мы внесли эти изменения, слово «dukes» будет анимироваться но наведению мыши. Обратите внимание, что обратный переход занимает столько же времени – элемент возвращается на свое прежнее место.

Функция transition-timing-function позволяет управлять темпом перехода и множеством его мелких деталей. Вы хотите, чтобы переход медленно начинался, а затем ускорялся, или наоборот? Или нужно, чтобы ускорение (замедление) было посередине перехода? Укажите одно из ключевых слов: linear, ease, ease-in, ease-out или ease-in-out.

Самый лучший способ разобраться с этими значениями – попробовать их в действии. Чаще всего при этом вы сами поймете, какое значение в данном конкретном случае лучше всего вам подходит.

Не забудьте определить достаточное время продолжительности перехода; если он будет слишком быстрым, вы не увидите разницы. Вдобавок к указанным пяти ключевым словам вы также можете указать более детальные характеристики скорости воспроизведения с помощью функции cubic-bezier().

В качестве ее аргумента указываются четыре параметра; например, linear означает то же самое, что и cubic-bezier (0 . О, 0.0, 1.0, 1.0). Если вы хотите, чтобы браузер думал над вашим кодом шесть лет, функция Безье подойдет как ничто другое. Во всех остальных случаях вас полностью удовлетворят пять базовых значений.

Как работают разные варианты значений transition-timing-function, вы можете посмотреть на странице http://www.netzgesta.de/ dev/cubic-bezier-timing-function.html.

Для нашего перехода мы напишем следующий код:

transition-duration

Это заставит наш переход несколько замедлиться к концу. Впрочем, при продолжительности анимации 0,2 с вы вряд ли это успеете заметить.

.
Читайте так же:
Not found

Нам доверяют

Интернет магазин