animation-timing-function в CSS


Содержание

CSS3 Свойство animation-timing-function

Пример

Воспроизведение анимации с одной и той же скоростью от начала до конца:

animation-timing-function:linear;
-moz-animation-timing-function:linear; /* Firefox */
-webkit-animation-timing-function:linear; /* Safari и Chrome */

Попробуйте сами »
Еще примеры внизу этой страницы.

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

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

Firefox поддерживает альтернативное свойство -moz-animation-timing-function.

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

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

Свойство animation-timing-function указывает характеристическую кривую (функцию) скорости анимации.

Функция скорости определяет определяет ВРЕМЯ, которое использует анимация для изменения от одного множества CSS стилей к другому.

Кривая скорости используется для равномерного, плавного воспроизведения анимации.

Значение по умолчанию: ease
Наследуется: нет
Версия: CSS3
JavaScript синтаксис: объект.style.animationTimingFunction=»linear»

Синтаксис

animation-timing-function: значение;

Свойство animation-timing-function использует математическую функцию, называемую Кубической Кривой Безье, для создания кривой скорости. Вы можете использовать ваши собственные значения в этой функции, либо использовать предопределенные значения:

Значение Описание
linear Анимация имеет одинаковую скорость от начала до конца
ease Значение по умолчанию. Анимация начинается медленно, затем ускоряется, перед завершением опять замедляется
ease-in Анимация имеет замедленное начало
ease-out Анимация имеет замедленное завершение
ease-in-out Анимация имеет замедленное начало и замедленное завершение
cubic-bezier(n,n,n,n) Определение ваших собственных значений в кубической функции Безье
Допустимыми значениями являются числовые значения то 0 до 1

Совет: Поэкспериментируйте с различными значениями в разделе «Попробуйте Сами» ниже.

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

Пример

Чтобы лучше понять различные значения временной функции скорости;
Здесь пять различных элементов

#div1
#div2
#div3
#div4
#div5
/* Firefox: */
#div1 <-moz-animation-timing-function: linear;>
#div2 <-moz-animation-timing-function: ease;>
#div3 <-moz-animation-timing-function: ease-in;>
#div4 <-moz-animation-timing-function: ease-out;>
#div5 <-moz-animation-timing-function: ease-in-out;>
/* Safari и Chrome: */
#div1 <-webkit-animation-timing-function: linear;>
#div2 <-webkit-animation-timing-function: ease;>
#div3 <-webkit-animation-timing-function: ease-in;>
#div4 <-webkit-animation-timing-function: ease-out;>
#div5

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

Пример

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

animation-timing-function

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

12.0+ 10.0+ 16.0+ 43.0+ 30.0+ 9.0+

Описание

CSS свойство animation-timing-function определяет кривую скорости для анимации.

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

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

Про CSS

Css Animation

Свойство animation позволяет анимировать элементы страницы.

Можно управлять длительностью анимации, повторением, направлением, типом движения и шагами. Анимировать можно любые элементы, в том числе псевдо-элементы.

Обязательное условие — наличие конкретных значений. Свойства со значением auto не анимируются.

Сафари в настоящее время не поддерживает анимацию псевдоэлементов, для просмотра записи воспользуйтесь другими браузерами

Пример кода анимации:

move — имя анимации 15s — длительность infinite — бесконечное повторение linear — тип движения

@keyframes

Сама анимация задается внутри блока @keyframes . После @keyframes задается имя анимации, а потом внутри фигурных скобок — её шаги.

Шаги можно задавать через проценты или с помощью ключевых слов from и to . При этом в шагах можно менять тип анимации ( animation-timing-function ):

Animation-name

Используется для задания имени анимации.

Возможные значения: одно или несколько имен анимации. Значение по умолчанию: нет.

animation-name: move; — одна анимация. animation-name: move, sun-color; — две анимации, имена задаются через запятую.

Animation-duration

Длительностью анимации управляет свойство animation-duration .

Возможные значения: время в секундах (s) или миллисекундах (ms). В случае нескольких анимаций время для каждой из них можно задать через запятую. Исходное значение — 0s.

Animation-timing-function

Свойство определяет тип анимации.

Плавная анимация ease — скольжение (значение по умолчанию) linear — ровное движение ease-in — ускорение к концу ease-out — ускорение в начале ease-in-out — более плавное скольжение, чем ease

cubic-bezier(число,число,число,число) позволяет задавать сложный тип анимации. Значения удобно подбирать на cubic-bezier.com.

Пошаговая анимация step-start и step-end — позволяют задать пошаговую анимацию, обязательно задавать конкретные шаги. При этом с step-start изменения происходят в начале шага, а с step-end — в конце.

step-end . Если выставить step-start , счетчик будет начинаться с единиц.


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

Animation-iteration-count

Управляет повторением анимации. Значение по умолчанию: 1 (анимация проигрывается один раз).

число — сколько раз проиграть анимацию. infinite — бесконечное повторение.

Animation-direction

Отвечает за направление анимации.

normal — анимация проигрывается в обычном направлении, с начала и до конца. reverse — анимация проигрывается в обратном направлении, то есть с конца. alternate — анимация проигрывается с начала и до конца, а затем в обратном направлении. alternate-reverse — анимация проигрывается с конца до начала, а затем в обратном направлении.

Animation-play-state

Управляет остановкой и проигрыванием анимации.

Возможные значения: running — анимация проигрывается (значение по умолчанию). paused — анимация застывает на первом шаге.

Управлять шагом, где будет остановка, не получается, но можно останавливать анимацию по :hover :

Animation-delay

С помощью animation-delay можно задавать задержку анимации перед началом воспроизведения.

Возможные значения: время в секундах (s) или миллисекундах (ms). Значения могут быть отрицательными. В случае нескольких анимаций время для каждой из них можно задать через запятую. Исходное значение — 0s.

Animation-fill-mode

Свойство определяет будет ли анимация воздействовать на элемент вне времени воспроизведения анимации.

none — анимация воздействует на элемент только во время воспроизведения, по окончании элемент возвращается в исходное состояние. forwards — анимация воздействует на элемент по окончании воспроизведения. backwards — анимация воздействует на элемент до начала воспроизведения. both — анимация воздействует на элемент и до начала, и после окончания воспроизведения.

Чтобы увидеть как backwards и both работают до начала воспроизведения анимации, задана задержка animation-delay: 3s; . Так же для этого имеет смысл открыть пример в новом окне.

Все эти свойства можно записать с помощью короткой записи, например:

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

CSS свойство animation-timing-function

Свойство animation-timing-function определяет кривую скорости для анимации.

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

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

CSS синтаксис

Возможные значения

Значение Описание
linear Скорость анимации одинаковая от начала и до конца.
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).
step-start Как таковой анимации нет. Стилевые свойства сразу же принимают конечное значение. Аналогично steps(1, start).
step-end Как таковой анимации нет. Стилевые свойства находятся в начальном значении заданное время, затем сразу же принимают конечное значение. Аналогично steps(1, end).
steps(int, start | end) Ступенчатая функция с двумя параметрами. Первый параметр определяет количество интервалов в функции. Это должно быть положительное целое число больше 0. Второй необязательный параметр — это либо ключевое слово «start», либо «end». Этот параметр определяет точку, где происходит изменение значения внутри интервала. Если второй параметр не используется, то его значением по умолчанию будет «end».
cubic-bezier(n,n,n,n) Пользовательское определение кривой скорости в функции кубической кривой Безье. Параметрами функции могут быть числовые значения в диапазоне от 0 до 1.
inherit Значение наследуется от родительского элемента.
initial Устанавливает значение по умолчанию.

Пример

Устанавливаем одинаковую скорость проигрывания на протяжении всего цикла анимации

Свойства animation-timing-function и animation-delay

В CSS помимо продолжительности анимации можно задать скорость перехода от одного ключевого кадра к другому, а также время задержки перед воспроизведением анимации. Для этого существуют два свойства – animation-timing-function и animation-delay . Разберем их по порядку.

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

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

В качестве значений принимаются те же самые ключевые слова и функции – ease , ease-in , cubic-bezier() и так далее. Мы не будем повторяться – список значений и их описание вы можете найти в уроке по transition-timing-function . Они полностью совместимы со свойством animation-timing-function . Там же объясняется тонкая разница между длительностью и скоростью анимации.

Чтобы задать функцию распределения скорости для всей анимации в целом, просто добавьте еще одну строку кода к вашему общему стилю для анимированного элемента:

Если же вы хотите установить разные значения animation-timing-function для каждого ключевого кадра анимации, тогда следует указать их в правиле @keyframes . Вернемся к нашему примеру: допустим, мы хотим, чтобы при переходе от первого ключевого кадра ко второму использовалась функция ease-in , а при переходе от второго кадра к третьему – функция ease-out . Запись будет выглядеть следующим образом:

Свойство animation-delay

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

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

Далее в учебнике: свойство animation-iteration-count для управления повтором анимации.

animation-timing-function

Свойство animation-timing-function используется для указания функции времени, которая определяет скорость для анимированного объекта с течением времени. Свойство описывает то как анимация будет прогрессировать в течении одного цикла, позволяя ей изменять скорость во время своего курса.

Общие сведения

Функции времени в CSS обычно относится к функциям плавности.

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

Синтаксис свойства

  • Синтаксис:
  • Значение по умолчанию: ease
  • Применяется: к псевдоэлементам ::before и ::after
  • Наследуется: нет
  • Анимируется: нет

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


  • — для полного списка всех возможных значений, детального объяснения каждого из них и примеров смотрите .

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

CSS Animation

Примечание

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

Указанная функция времени применяется к каждой итерации анимации (циклу), а не ко всей анимации в целом. Например, если для анимации заданы animation-timing-function: ease-in-out; и animation-iteration-count: 2; , то это замедлит анимацию в начале в первой итерации и в конце первой итерации, потом опять замедлит её в начале второй итерации и в конце второй итерации.

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

Свойство animation-timing-function обычно указывается как часть сокращённого свойства animation.

Animation-timing-function в CSS

New! My 44-page ebook «CSS in 44 minutes» is out! ��

# animation-timing-function

Defines how the values between the start and the end of the animation are calculated.

default animation-timing-function: ease;

The animation starts slowly, accelerates in the middle, and slows down at the end.

The animation starts slowly, and accelerates gradually until the end.

The animation starts quickly, and decelerates gradually until the end.

Like ease , but more pronounced.

The animation starts quickly, and decelerates gradually until the end.

The animation has a *constant speed.

The animation jumps instantly to the final state.

The animation stays at the initial state until the end, when it instantly jumps to the final state.

animation-timing-function: steps(4, end);

By using steps() with an integer, you can define a specific number of steps before reaching the end. The state of the element will not vary gradually, but rather jump from state to state in separate instants.

CSS animation-timing-function

The CSS animation-timing-function property allows you to specify how an animation will progress over one cycle of its duration.

More specifically, the property describes how the animation will change speed over the duration of each cycle. This effect is applied by using one of the timing functions described in CSS.

The animation-timing-function is specified using a cubic bézier curve, which is defined by four control points; P, P1, P2, and P3. The points P and P3, which represent the start and end of the animation cycle, are always set to (0,0) and (1,1) repectively.

The animation-timing-function property includes a number of keywords that can be used as a quick way to get a nice transition. Alternatively, you can use the cubic-bezier() function to specify your own cubic-bézier curve.

For a keyframed animation, the animation-timing-function property applies between keyframes, not over the entire animation. For example, in the case of an ease-in-out timing function, an animation will ease in at the start of the keyframe and ease out at the end of the keyframe. A animation-timing-function defined within a keyframe block applies to that keyframe, otherwise the timing function specified for the animation is used.

Syntax

Possible Values

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial Represents the value specified as the property’s initial value. inherit Represents the computed value of the property on the element’s parent. unset This value acts as either inherit or initial , depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

Cubic Bézier Curves

The ease , ease-in , ease-out , ease-in-out , linear , and cubic-bezier() timing functions use a Bézier curve.

A cubic Bézier curve is defined by four control points, P , P1 , P2 , and P3 as shown in the following diagram.

A cubic Bézier curve showing the Bézier timing function control points.

The P and P3 control points are always set to (0,0) and (1,1). In other words, they don’t move.

However, P1 and P2 can be moved with the Bézier curve timing functions. When using the cubic-bezier() function, you can specify the location of these two control points by using an x and y value. Like this: x1, y1, x2, y2 . When using one of the keywords, the keyword uses a predefined set of values (as listed above).

Step Timing Functions

The step-end , step-start , and steps() functions are all step timing functions. The way these work is that they progress the animation in steps — as opposed to a smooth curve like the Bézier curve functions.

Here’s more detail on how they work.

Using the step-end Keyword

The step-end keyword causes the animation to remain in the start position until the very end. At first, this may appear as though the animation isn’t actually working, as the effect won’t happen until the end.

Using the step-start Keyword

The step-start keyword causes the animation to jump straight to the end position, then remain there until the end of the animation.

Using the steps() Function

steps(5, end)

This is an example of using steps(5, end) .This breaks the animation up into 5 distinct points. The animation waits, then jumps to the next point at the applicable time (which is determined by how many steps you specify).

steps(5, start)

This is an example of using steps(5, start) . This is similar to steps(5, end) , however, it jumps to the first step immediately instead of waiting for the first time increment.

Basic Property Information

Example Code

Basic CSS


Working Example within an HTML Document

CSS Specifications

  • This property is defined in CSS Animations Level 1 (Editor’s Draft)

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.

Vendor Prefixes

For maximum browser compatibility many web developers add browser-specific properties by using extensions such as -webkit- for Safari, Google Chrome, and Opera (newer versions), -ms- for Internet Explorer, -moz- for Firefox, -o- for older versions of Opera etc. As with any CSS property, if a browser doesn’t support a proprietary extension, it will simply ignore it.

This practice is not recommended by the W3C, however in many cases, the only way you can test a property is to include the CSS extension that is compatible with your browser.

The major browser manufacturers generally strive to adhere to the W3C specifications, and when they support a non-prefixed property, they typically remove the prefixed version. Also, W3C advises vendors to remove their prefixes for properties that reach Candidate Recommendation status.

Many developers use Autoprefixer, which is a postprocessor for CSS. Autoprefixer automatically adds vendor prefixes to your CSS so that you don’t need to. It also removes old, unnecessary prefixes from your CSS.

You can also use Autoprefixer with preprocessors such as Less and Sass.

CSS :: Свойство animation-timing-function

css -свойство animation-timing-function (от англ. animation timing function – временна́я функция анимации) позволяет управлять плавностью анимации (скоростью переходов от одного состояния к другому), используя различные значения математической функции Безье, а также значения пошаговой функции.

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

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

Синтаксис

animation-timing-function: ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end | steps | cubic-bezier

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 .

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

Илон Маск рекомендует:  Элемент xslif фильтр xml xslt
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL