transition-delay в CSS


Содержание

CSS :: Свойство transition-delay

css -свойство transition-delay (от англ. transition delay – задержка перехода) устанавливает время задержки перед началом перехода.

Характеристики

  • Значение по умолчанию: 0s .
  • Применяется: ко всем элементам , а также к псевдоэлементам ::before и ::after .
  • Наследуется: нет .
  • Анимируется: нет .
  • JavaScript: object.style.transitionDelay=»value» .

Синтаксис

Значения

В качестве значения свойство принимает время, указанное в секундах ( s ) или миллисекундах ( ms ). Если указано нулевое значение времени (используется браузером по умолчанию), то переход начинается без задержек. Также разрешается использовать отрицательные значения, но с ними нужно быть осторожным, т.к. это может привести к изменению вида перехода в начальной стадии процесса. Разрешается перечислять через запятую несколько значений промежутков времени для каждого из свойств, перечисленных в качестве значения в transition-property .

Свойство transition-delay

Свойство transition-delay определяет паузу перед началом анимации. Значение transition-delay , по умолчанию, равняется и не наследуется от родительского элемента. Данное свойство может принимать несколько значений, разделенных запятыми, и тогда они будут соответствовать функциям для различных css-свойств, в том порядке, в котором они установлены в transition-property. transition-delay может принимать как положительные так и отрицательные значения.

Допустимые значения

  • длительность — любой временной промежуток, в одной из следующих единиц измерений:
    • ms — микросекунды
    • s — секунды

    при положительных значаниях изменение заданного свойства начнется, только после прошествия указанного времени
    при нулевом значении анимация начинается сразу же после изменения
    при отрицательных значения анимация начинается сразу же, но с того момента времени, который соответствует сдвигу от начала на указанное значение, то есть если мы укажем, например, длительность анимации (transition-duration) в 10 секунд, а паузу ( transition-delay ) в -5 секунд, то анимация начнется сразу с середины анимационного цикла.

Свойство transition-delay определено в спецификации CSS 3 модуль Transitions (анимационные переходы), применяется к все элементы, и псевдоэлементы :before и :after, и действует на всех визуальный носителях, его значение не наследуется от родительского элемента в иерархии документа, На данный момент свойство поддерживается во всех основных браузерах.

CSS-анимация с помощью свойства transition

CSS-анимация — это возможность сделать вашу страницу интерактивной и добавить ей определенной привлекательности, которая в свое время стала очень лакомым кусочком для всех верстальщиков. В этой статье мы рассмотрим анимацию с помощью свойства transition , хотя есть еще такие свойства, как @keyframes и animation , которые достойны отдельной статьи.

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

Большинство браузеров на данный момент поддерживают свойство CSS3 transition , о чем можно получить справку на сайте caniuse.com. Исключение составляют Internet Explorer 6-9 и все версии Opera Mini. Пользователи этих браузеров, к сожалению, не увидят созданной вами анимации.

hover-эффекты с помощью свойства transition

Чаще всего свойство transition применяется для создания hover-эффектов, или эффектов при наведении курсора мыши. Его суть заключается в том, что оно просчитывает изменения между свойствами, заданными для обычного состояния элемента и при наведении на него курсора мыши, которое задается с помощью псевдокласса :hover. Это позволяет создавать различные красивости от плавного изменения цвета текста и фона на кнопках-ссылках до наплывающих блоков и сменяющихся картинок. Очень интересные эффекты можно получить, если использовать псевдоэлементы ::before и/или ::after.

Составляющие свойства transition

Свойство transition является составным (обобщенным, или универсальным), что значит, что оно состоит из ряда свойств, которые можно задавать по отдельности. Синтаксис его таков:

Из кода видно, что вы можете использовать 4 свойства. Рассмотрим эти css-свойства по отдельности:

Свойство transition-property

Возможные значения transition-property :

Свойство transition-property задает название css-свойства для анимации перехода. Поскольку нужно просчитать разницу между начальным и конечным значением свойства, то и само свойство должно быть рассчитываемым. Например, можно изменить border-width с 1px до 6px, но нельзя преобразовать border-style из solid в dashed . Также можно уменьшить прозрачность элемента с помощью свойства opacity от значения 1 до 0, но невозможно анимировать переход от свойства visibility: visible к свойству visibility: hidden или от display: block к display: none . Для этого лучше воспользоваться методами show() или hide() библиотеки jQuery. Перечень доступных для анимации свойств можно найти в документации MDN.

Ниже показан код, который меняет цвет фона у div с с салатного на желтый за 0.8 секунды.

Сам пример вживую:

Наведите на блок ниже

В свойстве transition-property можно указать несколько значений через запятую или использовать значение all (все свойства), которое является значением по умолчанию. Также свойство transition-property имеет значение none (ни одно из свойств), которое обычно применяют для отмены анимации, например на мобильных устройствах.

Рассмотрим пример, в котором нужно анимировать несколько свойств:

Обратите внимание, что для div-а с свойство border-radius изначально не было задано, оно получило значение в 8px только при наведении (псевдокласс :hover ), тем не менее скругление углов тоже было анимированным, т.к. его включили в свойство transition-property, а его начальное значение (0) было взято из значений по умолчанию для border-radius .

Наведите на блок ниже

Тот же самый пример можно было сократить, использовав в коде свойство all вместо перечисления нескольких свойств для анимации.

Наведите на блок ниже

Свойство transition-duration

Как вы могли заметить в примерах к свойству transition-property для создания анимации требовалось указать промежуток времени, за который как раз и отвечало свойство transition-duration . Собственно, этих двух свойств вполне достаточно для создания анимации типа transition . Даже скажу больше — вы вообще можете обойтись свойством transition-duration , т.к. transition-property по умолчанию имеет значение all , т.е. все измененные свойства будут анимированы.

Свойство transition-duration измеряется либо в секундах ( 1s, 1.5s, 0.8s, .5s ) или в миллисекундах ( 1000ms, 1500ms, 800ms, 500ms ) . По умолчанию это свойство имеет значение 0, т.е. время на анимацию фактически нет, поэтому, если вы забудете указать это значение, то переход свойств не произойдет.

Код примера для исследования свойства transition-duration таков:

Пример с разной длительностью анимации:

Наведите на блок ниже

Свойство transition-duration

Использование только свойства transition-duration при hover-эффекте:

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

Используем transition-duration

Свойство transition-timing-function

В соответствии с переводом это свойство задаёт временную функцию, которая описывает способ расчета скорости перехода свойств(а) html-элемента от одного значения к другому. По умолчанию свойство имеет значение ease , т.е. анимация происходит с некоторым замедлением.

Варианты свойства transition-timing-function :

На примере ниже вы можете видеть действие большинства из этих вариантов. Можно заметить, что английское слово ease , которое присутствует в 4-х значениях свойства, отвечает за замедление движения, причем с добавкой in — в начале движения, с out — в конце, а с in-out — и в начале и в конце. График функции можно посмотреть в том же примере при наведении на любой блок.

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

На первом графике показан линейный переход ( linear ) — анимация происходит равномерно, без задержек в начале или в конце. Второй график отображает функцию ease-in — анимация происходит с замедлением в начале, т.к. именно в начале перехода за продолжительное время (2 клетки на графике) изменение свойства происходит очень незначительно (полклетки). Третий график отвечает за функцию ease-out — анимация с замедлением в конце. Для него характерно небольшое изменение значения анимируемого свойства за продолжительное время именно к концу анимации, т.е. ситуация и сам график противоположны функции ease-in .

Вариант cubic-bezier — это возможность управлять 2-мя точками графика с помощью маркеров для изменения точек на кривой Безье, которые чаще всего используются дизайнерами при создании векторных форм в таких программах, как Adobe Illustrator или Inkscape. Вам необязательно владеть этими программами, чтобы управлять графиком функции. Вполне достаточно знать, как использовать Инспектор свойств браузера (клавиши F12 или Ctrl + Shift + I ). Скриншоты сделаны в браузере Chrome.

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

Потяните за точку в начале или в конце графика и задайте другой вариант управления скоростью анимации transition :

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

Аналогичным образом можно управлять графиками функций в свойстве transition-timing-function с помощью текстового редактора Brackets. Для того чтобы выполнить редактирование, поставьте курсор в любом месте значения для свойства transition-timing-function и нажмите Ctrl + E .

В Brackets вы также можете воспользоваться перетягиванием одного или обоих маркеров курсором мыши или смещать его после выделения клавишами-стрелками. При изменении значения вы так же, как и в случае с Инспектором свойств, получаете функцию вида cubic-bezier :

Подробнее об основах изменения скорости можно почитать в этой статье.

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

Свойство transition-timing-function

Example 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis aliquam molestiae vitae possimus, nesciunt aliquid quaerat sint illum? Vel libero ducimus quidem nesciunt.

Example 2

Aspernatur assumenda culpa totam eligendi asperiores, nesciunt enim dignissimos ab perspiciatis, nisi saepe. Error et veniam natus magnam delectus nostrum corporis maiores!

Example 3

Architecto asperiores modi cum aliquid labore, quasi impedit quis velit similique adipisci sunt molestiae soluta at nam eligendi ad dignissimos temporibus.

transition-delay

The transition-delay property is used to specify the amount of time to wait before a transition effect is animated.

It allows a transition effect to start after some amount of time from when it is applied. A value of ‘0s’ means that the transition will start as soon as the property that is being transitioned is changed. A value other than zero, specifies an offset from the moment the property is changed, and the transition will delay execution by that offset.


For example, suppose you want to change the value of the background color of an element when it is hovered. Using a transition effect, your CSS might look something like this:

Without specifying a transition delay, the transition animation will start as soon as the element is hovered. Using transition-delay , you can literally delay the transition animation by an amount of time of your choice.

The time offset specified using transition-delay will offset the transition animation by the amount specified. This offset can also be a negative value.

If the value for transition-delay is a negative time offset then the transition will execute the moment the property is changed, but will appear to have begun execution at the specified offset. That is, the transition will appear to begin part-way through its play cycle.

You can specify one transition delay value or multiple comma-separated values. When you provide a list of comma-separated property names, this list is usually mapped to a list of values provided by other transition-related properties, namely the transition-duration , transition-timing-function , and transition-property properties. Each list of values in these properties is treated kind of like an array, where each value in a list of values has its own index. Then, each value in a list of values is mapped to its corresponding value with the same index in the list provided in the other properties.

For example, if you provide two transition-delay values, then the first value determines the transition delay for the first property in the list of property names provided by transition-property , and the second transition delay specifies the delay of the transition of the second property.

The transition-delay property is useful when you’re chaining transitions, and you want one transition to occur after another one has finished, or even after a certain amount of time of the start of the other transition.

Official Syntax

  • Syntax:
  • Initial: 0s
  • Applies To: all elements; and ::before and ::after pseudo-elements
  • Animatable: no
  • Values

    The time offset can be negative. If it is a negative time offset then the transition will execute the moment the property is changed, but will appear to have begun execution at the specified offset.

    Examples

    The following will delay the transition of the background color till after the transition of the position. This is done by specifying a transition-delay value for the transition of the background-color property that is equal to the transition-duration value of the position transition. The transition animations will take place when the element is hovered.

    Live Demo

    Hover over the containers in this demo to see the elements transition after certain time offsets. The background color change also occurs after the position transition ends, using the same transition delay technique mentioned in the Examples section above. Try changing the transition-delay values to see how that changes the animation transitions.

    Browser Support

    CSS3 Transitions

    Simple method of animating certain properties of an element, with ability to define property, duration, delay and timing function.

    transition-delay

    Easily manage projects with monday.com

    The transition-delay property, normally used as part of transition shorthand, is used to define a length of time to delay the start of a transition.

    The value can be one of the following:

    • A valid time value defined in seconds or milliseconds e.g. 1.3s or 125ms
    • A comma-separated list of time values, for defining separate delay values on multiple transitions for a single element e.g. 1s background-color, 350ms transform

    The default value for transition-delay is 0s , meaning that no delay will take place and the transition will start to occur immediately. The time value can be expressed as a decimal-based number for more precise timing.

    When a transition has a delay value that is negative, it will cause the transition to begin immediately (with no delay), however, the transition will begin partway through the process, as though it had already begun.

    The following Pen shows a hover effect on a box that uses a transition-delay value of 2s with a transition duration of 1s :

    Now compare that to the following demo, which has a delay of -1s and a duration of 3s :

    Notice that in the second example, only the final two-thirds of the actual transition are visible and there is no delay. The negative value removes the delay and effectively cuts into the duration.

    For compatibility in all supporting browsers, vendor prefixes are required, with the standard syntax declared last:

    IE10 (the first stable version of IE to support transition-delay ) does not require the -ms- prefix.

    A common use case is stagging transitions:

    Other Resources

    Browser Support

    This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

    transition-delay

    Поддержка браузерами

    12.0+ 10.0+ 16.0+ 26.0+ 12.1+ 6.1+

    Описание

    CSS свойство transition-delay указывает задержку перед началом анимации перехода. Задержка указывается в секундах(s) или миллисекундах(ms).

    Если в качестве значения задержки указано 0s, 0ms или отрицательное значение, анимация перехода начнётся сразу как только значение определённого в transition-property свойства изменится.

    Допускается указывать более одной задержки перед эффектом перехода, через запятую. Каждое новое значение задержки применяется к соответствующему свойству в том порядке, который определён в свойстве transition-property. Если список задержек меньше, чем количество свойств в transition-property, задержка эффекта перехода для оставшихся свойств пойдёт по второму кругу. Если определено больше задержек, чем указано свойств, то список задержек просто усекается до нужного количества.

    Значение по умолчанию:
    Применяется: ко всем элементам
    Анимируется: нет
    Наследуется: нет
    Версия: CSS3
    Синтаксис JavaScript: object.style.transitionDelay=»2s»

    Синтаксис

    Значения свойства

    Значение Описание
    время Указывает, сколько секунд(s) или миллисекунд(ms) будет задержка перед началом анимации перехода.
    inherit Указывает, что значение наследуется от родительского элемента.

    Пример

    Результат данного примера:

    Наведите на красный и/или синий квадрат, чтобы увидеть эффект перехода.

    CSS 3 Timing Functions и с чем их едят

    Хей народ, пристегните ремни и держитесь покрепче, ибо наступил действительно волнительный момент: вам предстоит разобраться в тонкостях чрезвычайно интересных временных функций CSS!

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

    Прежде всего, мы должны четко понимать, когда применяются временные функции в CSS. Так вот, данный функционал предназначен для работы с CSS анимацией: переходами (transitions) и покадровой анимацией (keyframes).

    О временной функции в CSS

    Данное свойство — одно из самых неочевидных в CSS анимации, в то время как большинство свойств из этой категории вполне самопонятны. Тем не менее, суть его в контроле и изменении скорости анимации: оно определяет точки ускорения и замедления за указанный период времени.

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

    Заметка: свойства timing-function не существует. Называя это свойство, на самом деле я имею в виду transition-timing-function и animation-timing-function .

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

    Сокращенная запись перехода не имеет строгого порядка значений, но требует, чтобы значение transition-delay находилось после значения transition-duration (не обязательно непосредственно после). Кроме того, значение transition-duration является единственным необходимым для определения функции. А поскольку значения по умолчанию у остальных параметров вполне приемлемы, для определения перехода вам редко понадобится нечто большее, чем:

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

    Теперь, когда вы знаете, что делают временные функции, пришла пора узнать, как они это делают.

    Заглянем под капот

    Многие из вас наверняка не заостряли свое внимание на допустимых значениях свойства timing-function . Так вот, их пять: ease (по умолчанию), ease-in , ease-out , ease-in-out и linear . При этом данные значения — всего лишь короткая запись определения кривой Безье.

    Вы можете быть незнакомы с данным термином, однако я держу пари, что в действительности вам доводилось видеть кривую Безье. Черт побери, если вы использовали какой-либо графический пакет, то наверняка даже сами создавали её! Именно так, ибо когда вы используете инструмент Pen или Path для создания гладкой кривой, то, что у вас получается, — и есть кривая Безье! В нашем случае она — «волшебство» временной функции, описывающее тип ускорения на графике.

    Данная кривая Безье соответствует значению ease (изображение принадлежит Smashing Magazine)

    Если ваша реакция на впервые увиденную кривую Безье была подобна моей, у вас наверняка возник вопрос: как вообще такая кривая может быть построена по четырем точкам на графике?! Вряд ли смогу я вам объяснить это на словах, однако у меня есть фантастическая гифка, которая поможет мне в этом:


    Рисование кривой Безье (изображение взято из Википедии)

    Поскольку данная кривая строится по четырем точкам, мы называем ее кубической (cubic) кривой Безье, в отличие от квадратичной кривой (quadratic, по трем точкам) и кривой четвертого порядка (quartic, по пяти точкам).

    Функция cubic-bezier()

    А вот сейчас вам станет еще интереснее, ибо я скажу, что вы можете задавать кубическую кривую с помощью функции cubic-bezier() , используя её вместо ключевых значений свойства timing-function . Полагаю, вам необходимо некоторое время, дабы сдержать волнение.

    С помощью функции cubic-bezier() вы можете манипулировать кривой так, как вам заблагорассудится, задавая при этом абсолютно любые параметры ускорения вашей анимации! Так что давайте посмотрим, как эта функция работает и каким образом она позволяет создавать собственные кривые Безье.

    Во-первых, мы уже знаем, что кубическая кривая строится по четырем точкам: 0, 1, 2, 3. Во-вторых, важно помнить, что первая и последняя точки (0 и 3) уже определены на графике, где точка 0 всегда имеет значение 0;0 (снизу слева), а точка 3 — 1;1 (сверху справа).

    Данное условие оставляет нам всего две точки, которые необходимо разместить на графике, и сделать это можно с помощью функции cubic-bezier() ! Она принимает четыре аргумента: первые два — координаты x, y первой точки; вторые два — координаты x, y второй точки.

    Чтобы вы освоили синтаксис и то, как эта функция создает кривую, а также её физическое влияние на анимацию, я покажу вам пять ключевых значений свойства timing-function , их эквивалент для cubic-beizer() и результирующий эффект анимации.

    EASE-IN-OUT

    Давайте начнем с данного ключевого значения, поскольку и логику построения кривой, и переложение её на анимацию сейчас, вероятно, проще всего понять.

    Совершенно симметричная кривая Безье, что означает, что ускорение и замедление анимации будет производиться с одинаковой скоростью (изображение принадлежит Smashing Magazine)

    Точка 1 расположена на 0,42 по оси x и на 0 по оси y, в то время как точка 2 — на 0,58 и 1 соответственно. Результат — совершенно симметричная кривая Безье: ускорение и замедление анимации будет происходить с одинаковой скоростью. Отсюда и название ключевого слова.

    Посмотрите на демонстрацию и вы увидите физический эффект значения ease-in-out , сравните его с другими значениями.

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

    Кривая ease имеет крутое начало и много более плавное продолжение (изображение принадлежит Smashing Magazine)

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

    EASE-IN И EASE-OUT

    Как не сложно догадаться, данные ключевые значения имеют противоположный смысл. ease-in плавно ускоряет анимацию развивая максимальную скорость к её завершению, в то время как ease-out плавно снижает изначально максимальную скорость перед завершением анимации. Следуя логике, ключевое значение ease-in-out , которое мы рассмотрели ранее, — отличная комбинация этих двух кривых Безье.

    Кривые Безье: ease-in слева, ease-out справа (изображение пренадлежит Smashing Magazine)

    LINEAR

    Последнее ключевое значение, которое вообще-то к кривым не относится. Исходя из названия, значение linear свойства timing-function устанавливает одинаковую скорость в течение всей анимации, что означает, что вместо кривой Безье мы получим прямую линию. То есть в данном случае не имеется какой-либо модели ускорения для изображения на графике.

    Значение linear подразумевает одинаковую скорость на протяжении всей анимации (изображение принадлежит Smashing Magazine)

    Если вы вновь посмотрите демо в начале, то наверняка заметите, что несмотря на одинаковую общую продолжительность, некоторые из анимаций кажутся медленнее остальных. Почему же так происходит? Ну, например, у ease-in-out начало и завершение анимации проходит с оттяжкой. Поэтому, чтобы уложиться в заданную продолжительность, в основной части скорость анимации существенно выше. В виду такого поведения мы воспринимаем её и короче, и быстрее, тогда как, например, линейная анимация кажется нам длинной и растянутой.

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

    Создание собственных моделей ускорения с помощью функции cubic-bezier()

    Теперь, когда мы узнали ключевые значения свойства timing-function и соответствующие им кривые Безье, а также понаблюдали их воздействие на анимацию, давайте научимся создавать собственные модели ускорения с помощью манипуляций кривой.

    К настоящему моменту предполагается, что вы уже умеете располагать точки 1 и 2 на графике с помощью функции cubic-bezier() , а также ясно представлять, каким образом это влияет на анимацию. Хотя, если вы делаете это «в слепую», не удивительно, что данное занятие может очень быстро надоесть.

    К счастью, существуют на Земле такие люди, как Лиа Веру (Lea Verou), которые, вероятно, не успокоятся пока кодинг на CSS не станет еще легче! Ли разработала приложение «Кубический Безье» для создания собственных кривых Безье и сравнения их со стандартными. Так что вместо того, чтобы гонять туда-сюда циферки в cubic-bezier() , зайдите на Cubic Bézier, поиграйтесь с кривой да посмотрите на результат. Это куда круче!

    Скришнот страницы сайта Cubic Bézier (изображение принадлежит Smashing Magazine)

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

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

    Ну, а теперь давайте разберемся с самым первым из приведенных выше примеров и попытаемся понять, каким образом получился столь отличный от остальных эффект.

    Пример нестандартной кривой Безье (изображение принадлежит Smashing Magazine)

    Основное отличие данной временной функции от значений по умолчанию состоит в резком отклонении кривой от шкалы «прогрессии» (по оси y). Это обуславливает быстрый старт и завершение анимации, но затяжную паузу в середине (в том месте, где кривая выравнивается). Данная модель резко контрастирует с той, к которой мы привыкли с обычными временными функциями, которые используют противоположный подход, замедляя анимацию в начале и конце, а не по середине.

    А теперь проявим изобретательность

    Да-да: кривые Безье становятся еще более захватывающими! И кто бы мог подумать? Тем временем, границы воображения расширяются с открытием того, что лишь шкала времени (по оси x) ограничена на графике промежутком от нуля до единицы, в то время как шкала прогрессии (по оси y) может выходить за его рамки как снизу, так и сверху.

    Шкала прогрессии — это именно то, о чем вы подумали: нижний конец (0) являет собой начало анимации, а верхний (1) — завершение. Как правило, кубическая кривая Безье всегда следует снизу вверх по данной шкале с разной интенсивностью, пока не достигнет конечной точки анимации. Тем не менее, возможность располагать точки 1 и 2 вне промежутка 0-1 позволяет кривой выходить за его пределы, что вызывает движение в обратном направлении! Как обычно, лучший способ понять это — посмотреть:

    Кривая безье со значениями за пределами 0-1 (изображение принадлежит Smashing Magazine)

    Точка 2 расположена за пределами обычного промежутка 0-1 на -0,5 , что в свою очередь тянет кривую вниз. Посмотрите следующее демо и вы увидите эффект «подпрыгивания» в середине анимации.

    И наоборот, вы могли бы разместить это «движение назад» в начале анимации, а также заставить кривую немного «выбежать» за предполагаемую конечную точку. Представьте, будто вы делаете пару шагов назад для разбега; затем, в конце, вы проноситесь мимо финиша, в результате чего вам приходится немного вернуться, чтобы узнать время, которое показал хронометр. Посмотрите пример, чтобы действительно понять, о чем идет речь. Кроме того, изучите кривую Безье, которая создает такой эффект.

    Кривая Безье со значениями за пределами 0-1 (изображение принадлежит Smashing Magazine)

    Теперь у вас должно быть вполне ясное представление о том, как значения cubic-bezier() за пределами 0-1 могут физически повлиять на поведение анимации. Мы, конечно, можем глазеть на перемещающиеся кубики целый день, но давайте таки закончим данный раздел примером, который ясно покажет изобретательский подход в использовании временной функции.

    Всё верно: мы анимируем воздушный шарик! Чего. То ли это, что вам всегда хотелось делать с помощью CSS?

    Суть анимации в «надувании» шарика по клику таким образом, что он взлетит к «потолку» и слегка отскочет от него, как по-настоящему. Значение cubic-bezier() за границей 0-1 и есть тот инструмент, который позволит нам создать этот эффект «отскока», повторяя реалистичное поведение. В представленном фрагменте кода показаны координаты, выставленные в функции cubic-bezier() , а далее показана полученная кривая.

    Кривая Безье, эмулирующая «отскакивающий» шарик (изображение принадлежит Smashing Magazine)

    Данный пример отлично показывает, как кривая трансформируется в итоговую анимацию, поскольку кривая отражает её практически идеально. Сначала кривая проходит от начала шкалы прогрессии по прямой, заставляя шарик двигаться от её начала до конца с одинаковой скоростью. Затем, подобно замедлению шарика, кривая резко изгибается в обратном направлении, прежде чем начать постепенно возвращаться к вершине. На самом деле всё очень просто!

    Так что как только вы освоите кривую и искусство манипулирования ею, будете умницей!

    Временные функции и покадровая анимация CSS

    Перед тем, как мы пойдем дальше, следует упомянуть о поведении временных функций при использовании их в покадровой анимации. Общий смысл тот же (в сравнении с переходами [transition]), однако есть одно исключение, которое стоит запомнить: когда вы применяете временную функцию к нескольким кадрам, она выполняется на каждом отдельном кадре, нежели на протяжении всей анимации.

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

    Исходная анимация на Codepen (гифка получилась кривоватой)

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

    Если для какого-либо конкретного кадра вам необходимо определить собственную временную функцию, то определите её прямо в коде этого кадра, как показано в следующем примере:

    Временная функция steps()

    Вы думали, что на этом наши приключения окончены? Как бы не так! Я ведь уже говорил вам, что CSS не ограничивается встроенными временными функциями!

    В данном разделе мы изучим концепцию «пошаговых» функций и заменим кривые прямыми линиями с помощью временной функции steps .

    Данная функция весьма полезна, несмотря на свою специфичность. Она позволяет разбить анимацию на отрезки, что будет отличать её от обычного анимированного движения. Например, если нам надо переместить квадрат на 400 пикселей вправо за 4 шага в течение 4 секунд, то вместо плавного движения он будет «прыгать» на 100 пикселей каждую секунду. А теперь давайте взглянем на код данного примера. Он, должно быть, просто дуновение свежести после погружения в тонкости функции cubic-bezier() !

    Как видите, все дело в определении количества отрезков анимации. Но имейте в виду, что оно не может быть отрицательным или десятичным числом. Есть и второй, не обязательный, аргумент, возможные значения которого — start и end (последнее является значением по умолчанию).

    Значение start запускает анимацию в начале каждого шага, а end — в конце. Применительно к «движущемуся квадрату», данная картинка поможет лучше объяснить разницу между двумя этими значениями.

    Различие значений start и end функции steps() (изображение принадлежит Smashing Magazine)

    Как видите, со значением start анимация начинается немедленно, а при end — с задержкой в одну (в данном случае) секунду.

    Ну, и ради пущей всеобъемлющности материала, отметим, что у функции step() есть два предопределенных аргумента: step-start и step-end , эквивалентные записи steps(1, start) и steps(1, end) соответственно.

    Изобретательный подход к «пошаговым» функциям

    Наверняка из повседневных задач вам вряд ли так уж часто будет выпадать анимация движущегося квадрата, тем не менее с помощью функции steps() можно сделать уйму других крутых штук. Допустим, если в вашем распоряжении имеется несколько мультяшных спрайтов, то вы можете использовать уже изученную технику для создания анимации, используя всего пару CSS свойств! Давайте посмотрим на демо и код.

    Итак, у нас есть прямоугольник 125 пикселей в ширину с фоновым изображением на 2 000 пикселей, содержащим 16 кадров. Изначально это изображение расположено по левому краю прямоугольника, и всё, что нам предстоит сделать, — сдвигать его влево так, чтобы все 16 кадров прошли через маленькое «окошко» нашего прямоугольника. При «обычной» анимации кадры просто пролетели бы мимо, однако с функцией steps() фоновое изображение сдвигается влево ровно за 16 шагов, в достаточной мере показывая каждый кадр изображения. Вот так мы сделали мини-мультик всего лишь с помощью CSS анимаций!

    Демонстрация способа смещения фонового изображения так, что каждый кадр пройдет через небольшое «окошко» (изображение принадлежит Smashing Magazine)

    Еще одно забавное использование функции steps() я нашел благодаря Лиа Веру (кому же еще?), которая придумала весьма интересную анимацию компьютерного набора. О ней я вам сейчас и расскажу.

    Для начала, вам нужен какой-то текст. А также, к сожалению, вам необходимо знать, сколько символов он содержит, ибо вам придется использовать это количество в CSS. Еще одно условие: шрифт должен быть моноширинным для того, чтобы все символы имели одинаковую ширину.

    Наш текст состоит из 11 символов. Длину строки мы укажем с помощью единицы измерения ch , а для браузеров, не имеющих её поддержки, мы напишем другое значение. Далее по правой стороне строки мы поставим черную рамку, которая станет курсором. И теперь, когда всё на месте, нам нужно лишь анимировать текст, а это чрезвычайно просто.

    Нам понадобятся две отдельные анимации: одна для курсора, другая для печати. Чтобы сделать курсор, необходимо всего лишь заставить мерцать черную рамку.

    Как и предполагалось, рамка просто меняет свой цвет с черного на прозрачный и обратно. В данном случае функция steps() имеет определенный смысл: уберите её, и курсор, вместо того, чтобы «моргать», будет плавно появляться и исчезать.

    Наконец, анимация печатания столь же проста. Всё, что нам нужно сделать, — уменьшить длину строки до нуля, а затем постепенно наращивать её за 11 шагов (по количеству символов).

    Текст будет «раскрываться» по одной букве за шаг в течении восьми секунд, в то время как «курсор» ( border-right ) будет мигать постоянно. Техника проста настолько же, насколько и эффективна.

    Теперь мы можем дополнить этот замечательный пример, попробовав обратный эффект — удаление текста. Для этого нужно изменить ключевое слово кадра с from на to и затем добавить параметр animation-fill-mode со значением forwards , чтобы удостовериться, что когда текст «удалится» (т. е. когда анимация завершится), он останется «удаленным». Посмотрите на демо.


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

    Поддержка браузерами

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

    ПОДДЕРЖКА CSS TRANSITIONS

    Браузер С префиксом Без префикса
    Internet Explorer Нет 10+
    Firefox 4+ ( -moz- ) 16+
    Chrome 4+ ( -webkit- ) 26+
    Safari 3.1+ ( -webkit- ) 6.1+
    Opera 10.5+ ( -o- prefix) 12.1+

    Несмотря на то, что все новейшие версии браузеров откинули префиксы для переходов, все-таки было бы не лишним дополнительно прописывать свойства с префиксом -webkit- для поддержки устаревших мобильных браузеров. В то же время, с точки зрения прогрессивного улучшения, я думаю, что необходимость использования префиксов -moz- и -o- уже прошла.

    ПОДДЕРЖКА ВРЕМЕННЫХ ФУНКЦИЙ CSS

    Браузер С префиксом Без префикса
    Internet Explorer Нет 10+
    Firefox 5+ ( -moz- ) 16+
    Chrome 4+ ( -webkit- ) Не поддерживается
    Safari 4+ ( -webkit- ) Не поддерживается
    Opera 12 ( -o- prefix), 15+ ( -webkit- prefix) Только 12.1 (не поддерживается после перехода на WebKit)

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

    Так что же мы узнали о временных функциях CSS? Давайте подытожим.

    1. Они определяют, когда анимация ускоряется и замедляется
    2. Они гораздо круче, нежели набор предопределенных значений
    3. Вы можете создавать эффект «отскока» с помощью значений cubic-bezier(), выходящих за пределы промежутка 0-1
    4. Вы можете разбить анимацию на несколько шагов/отрезков
    5. Поддержка браузерами великолепна и только улучшается

    И, несмотря на кросс-платформенность описанных технологий, это не было бы статьей о техниках CSS 3, если бы я не упомянул о прогрессивном улучшении. Всегда идите от простого к сложному: убедитесь, что ваша работа доступна на устройствах и в браузерах, которые не поддерживают данный функционал, перед тем, как создавать эффекты для браузеров, которые смогут их обработать.

    А теперь вперед! Счастливых шажков и искривлений!

    Свойство transition-delay

    Свойство transition-delay указывает на временную задержку перед анимированным переходом (можно указать несколько через запятую).

    Анимированный переход будет совершаться при динамическом изменении свойств элемента, указанных в transition-property.

    Допустимые значения

    • — точное значение временной задержки перед переходом. Задается в секундах s или в миллисекундах ms
    Значение по умолчанию
    Применимо ко всем элементам, псевдоэлементам :before и :after
    Наследование нет
    Версия CSS CSS 3
    Поддерживается браузерами

    Пример

    Твой код:
    Результат:

    Заметки

    Это свойство относится к модулю CSS Transitions Module Level 3 находящемся в разработке W3C, поэтому в нем возможны дополнения.

    Safari 3.1 и выше Chrome 1 и выше поддерживают аналогичное свойство -webkit-transition-delay.

    Opera 10.5 и выше поддерживает аналогичное свойство -o-transition-delay но только для блочных и строчных элементов.

    Разработчики Firefox заявляют поддержку аналогичного свойства -moz-transition-delay с выходом Firefox 4.0.

    CSS3 Свойство transition-delay

    Пример

    Ждать 2 секунды перед запуском эффекта перехода:

    transition-delay: 2s
    -moz-transition-delay: 2s; /* Firefox 4 */
    -webkit-transition-delay: 2s; /* Safari и Chrome */
    -o-transition-delay: 2s /* Opera */

    Попробуйте сами »

    Поддержка Браузерами

    Свойство transition-delay не поддерживается ни одним браузером.

    Firefox 4 поддерживает альтернативное свойство -moz-transition-delay.

    Safari и Chrome поддерживают альтернативное свойство -webkit-transition-delay.

    Opera поддерживают альтернативное свойство -o-transition-delay.

    Определение и Использование

    Свойство transition-delay указывает, когда эффект перехода должен начаться.

    Значение transition-delay определяется в секундах (s) или миллисекундах (ms).

    CSS-анимации

    Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

    Более новая информация по этой теме находится на странице https://learn.javascript.ru/css-animations.

    Все современные браузеры, кроме IE9- поддерживают CSS transitions и CSS animations, которые позволяют реализовать анимацию средствами CSS, без привлечения JavaScript.

    Однако, как мы увидим далее, для более тонкого контроля анимации JavaScript вовсе не будет лишним.

    CSS transitions

    Идея проста. Мы указываем, что некоторое свойство будет анимироваться при помощи специальных CSS-правил. Далее, при изменении этого свойства, браузер сам обработает анимацию.

    Например, CSS, представленный ниже, 3 секунды анимирует свойство background-color .

    Теперь любое изменение фонового цвета будет анимироваться в течение 3х секунд.

    При клике на эту кнопку происходит анимация её фона:

    Есть всего 5 свойств, задающих анимацию:

    • transition-property
    • transition-duration
    • transition-timing-function
    • transition-delay

    Далее мы изучим их все, пока лишь заметим, что общее свойство transition может перечислять их все, в порядке: property duration timing-function delay , а также задавать анимацию нескольких свойств сразу.

    Например, при клике на эту кнопку анимируются одновременно цвет и размер шрифта:

    Далее мы рассмотрим свойства анимации по отдельности.

    transition-property

    Список свойств, которые будут анимироваться, например: left , margin-left , height , color .

    Анимировать можно не все свойства, но многие. Значение all означает «анимировать все свойства».

    transition-duration

    Продолжительность анимации, задаётся в формате CSS time, то есть в секундах s или ms .

    transition-delay

    Задержка до анимации. Например, если transition-delay: 1s , то анимация начнётся через 1 секунду после смены свойства.

    Возможны отрицательные значения, при этом анимация начнётся с середины.

    Например, вот анимация цифр от 0 до 9 :

    Она осуществляется сменой margin-left у элемента с цифрами, примерно так:

    В примере выше JavaScript просто добавляет элементу класс – и анимация стартует:

    Можно стартовать её «с середины», с нужной цифры, например соответствующей текущей секунде, при помощи отрицательного transition-delay .

    В примере ниже при клике на цифру она начнёт двигаться с текущей секунды:

    В JavaScript это делается дополнительной строкой:

    transition-timing-function

    Временнáя функция, которая задаёт, как процесс анимации будет распределён во времени, например начнётся ли анимация медленно, чтобы потом ускориться или наоборот.

    Самое сложное, но при небольшом изучении – вполне очевидное свойство.

    У него есть два основных вида значения: кривая Безье и по шагам. Начнём с первого.

    Кривая Безье

    В качестве временной функции можно выбрать любую кривую Безье с 4 опорными точками, удовлетворяющую условиям:

    1. Начальная точка (0,0) .
    2. Конечная точка (1,1) .
    3. Для промежуточных точек значения x должны быть в интервале 0..1 , y – любыми.

    Синтаксис для задания кривой Безье в CSS: cubic-bezier(x2, y2, x3, y3) . В нём указываются координаты только двух точек: второй и третьей, так как первая и последняя фиксированы.

    Она указывает, как быстро развивается процесс анимации во времени.

    • По оси x идёт время: 0 – начальный момент, 1 – конец времени transition-duration .
    • По оси y – завершённость процесса: 0 – начальное значение анимируемого свойства, 1 – конечное.

    Самый простой вариант – это когда процесс развивается равномерно, «линейно» по времени. Это можно задать кривой Безье cubic-bezier(0, 0, 1, 1) .

    График этой «кривой» таков:

    …Как видно, это просто прямая. По мере того, как проходит время x , завершённость анимации y равномерно приближается от 0 к 1 .

    Поезд в примере ниже с постоянной скоростью «едет» слева направо, используя такую временную функцию:

    Илон Маск рекомендует:  title в HTML
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL