Css transition time function

transition — timing — function

Будет ли элемент меняться линейно или более причудливо?

Время чтения: меньше 5 мин

Кратко

Скопировать ссылку «Кратко» Скопировано

transition — timing — function определяет функцию зависимости значения свойства от времени. Другими словами, эта функция определяет скорость течения анимации.

Пример

Скопировать ссылку «Пример» Скопировано

В примере ниже свойство color будет меняться линейно (равномерно) на протяжении 300 мс.

 .box  transition-property: color; transition-duration: .3s; transition-timing-function: linear;> .box  transition-property: color; transition-duration: .3s; transition-timing-function: linear; >    Скопировать Скопировано Не удалось скопировать   

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Ключевые слова в качестве значений:

 .selector  transition-timing-function: ease; /* Используется по умолчанию */ transition-timing-function: ease-in; transition-timing-function: ease-out; transition-timing-function: ease-in-out; transition-timing-function: linear; transition-timing-function: step-start; transition-timing-function: step-end;> .selector  transition-timing-function: ease; /* Используется по умолчанию */ transition-timing-function: ease-in; transition-timing-function: ease-out; transition-timing-function: ease-in-out; transition-timing-function: linear; transition-timing-function: step-start; transition-timing-function: step-end; >    Скопировать Скопировано Не удалось скопировать   

Описание функций в качестве значений:

 .selector  transition-timing-function: steps(4, jump-end); transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);> .selector  transition-timing-function: steps(4, jump-end); transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); >    Скопировать Скопировано Не удалось скопировать   

Дополнительные параметры функции Steps:

 .selector  transition-timing-function: steps(4, jump-start); transition-timing-function: steps(10, jump-end); transition-timing-function: steps(20, jump-none); transition-timing-function: steps(5, jump-both); transition-timing-function: steps(6, start); transition-timing-function: steps(8, end);> .selector  transition-timing-function: steps(4, jump-start); transition-timing-function: steps(10, jump-end); transition-timing-function: steps(20, jump-none); transition-timing-function: steps(5, jump-both); transition-timing-function: steps(6, start); transition-timing-function: steps(8, end); >    Скопировать Скопировано Не удалось скопировать   

Указание нескольких функций:

 .selector  transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);> .selector  transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1); >    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку «Как понять» Скопировано

Например, нам нужно изменить какое-то свойство от 0 до 100 за 1 секунду. В течение этой секунды значение свойства может меняться с разной скоростью. Как именно — как раз описывает наша функция.

Например, если свойство меняется равномерно всю секунду, то это линейная зависимость, которая описывается ключевым словом linear и выглядит так:

Если свойство меняется сначала быстро, а потом медленнее, то эта зависимость описывается ключевым словом ease — out и выглядит так:

Функция cubic — bezier

Скопировать ссылку «Функция cubic-bezier» Скопировано

В общем случае график функции описывается значением cubic — bezier ( p1 , p2 , p3 , p4 ) . В качестве параметров p1 и p3 обязательно должны быть числа от 0 до 1.

Каждому ключевому слову соответствует свой график функции с определёнными коэффициентами:

• linear — cubic — bezier ( 0 . 0 , 0 . 0 , 1 . 0 , 1 . 0 )
• ease — cubic — bezier ( 0 . 25 , 0 . 1 , 0 . 25 , 1 . 0 )
• ease — in — cubic — bezier ( 0 . 42 , 0 , 1 . 0 , 1 . 0 )
• ease — out — cubic — bezier ( 0 , 0 , 0 . 58 , 1 . 0 )
• ease — in — out — cubic — bezier ( 0 . 42 , 0 , 0 . 58 , 1 . 0 )

Функция steps

Скопировать ссылку «Функция steps» Скопировано

Изменять свойство можно не плавно, а скачками. Функция steps описывает, за сколько шагов должно произойти изменение свойства.

 .box  transition-timing-function: steps(5, jump-start);> .box  transition-timing-function: steps(5, jump-start); >    Скопировать Скопировано Не удалось скопировать   

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

Второй параметр определяет логику, по которой будет разделён промежуток на отрезки.

Например, если первый параметр равен 5, то всего будет 5 шагов. На каждом шаге отображение будет задерживаться, следуя одному из условий в зависимости от второго параметра. Второй параметр может принимать следующие значения:

jump — start , jump — end , jump — both , jump — none , start , end

• на 20%, 40%, 60%, 80% и 100% — jump — start . В момент старта анимации текущее значение сразу прыгнет на 20% и там задержится на $1/5$ времени.
• на 0%, 20%, 40%, 60% и 80% — jump — end . Текущее значение начинает задержку сразу на 0%
• или сделает 5 остановок в промежутке между 0% и 100% (16%, 33%, 50%, 66%, 84%) — jump — both
• или сделает 5 остановок, включая 0% и 100% (0%, 25%, 50%, 75%, 100%) — jump — none

Интересно, что Safari вплоть до версии 13.1 (Catalina) не поддерживал эти значения 🤷‍♂️
Начиная с версии 14 (Big Sur) в Safari все хорошо 🙂

В зависимости от используемого сейчас браузера пример ниже может изменяться:

Ключевые слова step — start , step — end являются синонимами для записи steps ( 1 , jump — start ) и steps ( 1 , jump — end ) . Изменение происходит скачком за один шаг.

step — start переходит в конечное состояние сразу при старте анимации и дожидается конца анимации.

step — end дожидается конца анимации и потом переходит в конечное состояние

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 Если не указано свойство transition — timing — function , то по умолчанию браузер будет использовать функцию ease и соответствующее ей описание cubic — bezier ( 0 . 25 , 0 . 1 , 0 . 25 , 1 . 0 )

💡 Задавая коэффициенты p2 и p4 меньше 0 или больше 1, можно добиться эффекта «пружины», что в некоторых случаях может сделать анимацию более интересной

На практике

Скопировать ссылку «На практике» Скопировано

Денис Ежков советует

Скопировать ссылку «Денис Ежков советует» Скопировано

🛠 Самой часто используемой функцией анимации является ease . В основном, потому что верстальщикам лень писать значение функции, а по умолчанию в браузере используется именно ease .

Егор Левченко советует

Скопировать ссылку «Егор Левченко советует» Скопировано

🛠 Если вы хотите создать крутую анимацию и понимаете, как именно должна выглядеть ваша Кривая Безье, можно воспользоваться специальным сайтом, например https://cubic-bezier.com/.

 .selector  transition-timing-function: cubic-bezier(1, .2, .52, .46);> .selector  transition-timing-function: cubic-bezier(1, .2, .52, .46); >    Скопировать Скопировано Не удалось скопировать   

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

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

Источник

transition

Transitions enable you to define the transition between two states of an element. Different states may be defined using pseudo-classes like :hover or :active or dynamically set using JavaScript.

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

/* Apply to 1 property */ /* property name | duration */ transition: margin-right 4s; /* property name | duration | delay */ transition: margin-right 4s 1s; /* property name | duration | easing function */ transition: margin-right 4s ease-in-out; /* property name | duration | easing function | delay */ transition: margin-right 4s ease-in-out 1s; /* Apply to 2 properties */ transition: margin-right 4s, color 1s; /* Apply to all changed properties */ transition: all 0.5s ease-out; /* Global values */ transition: inherit; transition: initial; transition: revert; transition: revert-layer; transition: unset; 

The transition property is specified as one or more single-property transitions, separated by commas.

Each single-property transition describes the transition that should be applied to a single property (or the special values all and none ). It includes:

• zero or one value representing the property to which the transition should apply. This may be any one of:
  • the keyword none
  • the keyword all
  • a naming a CSS property.

  See how things are handled when lists of property values aren’t the same length. In short, extra transition descriptions beyond the number of properties actually being animated are ignored.

  Formal definition

  • transition-delay : 0s
  • transition-duration : 0s
  • transition-property : all
  • transition-timing-function : ease
  • transition-delay : as specified
  • transition-duration : as specified
  • transition-property : as specified
  • transition-timing-function : as specified

  Formal syntax

  transition =
  #

  =
  [ none | ] ||
  ||
  ||

  =
  all |

  =
  linear |
  |
  |
  

  =
  linear( )

  =
  ease |
  ease-in |
  ease-out |
  ease-in-out |
  cubic-bezier( , , , )

  =
  step-start |
  step-end |
  steps( [, ]? )

  =
  [ ]#

  =
  jump-start |
  jump-end |
  jump-none |
  jump-both |
  start |
  end

  =
  &&
  ?

  =

  Examples

  Simple example

  In this example, when the user hovers over the element, there is a one-second delay before the four-second font-size transition occurs.

  HTML

  a class="target">Hover over mea> 

  CSS

  .target  font-size: 14px; transition: font-size 4s 1s; > .target:hover  font-size: 36px; > 

  There are several more examples of CSS transitions included in the Using CSS transitions article.

  Specifications

  Browser compatibility

  BCD tables only load in the browser

  See also

  Found a content problem with this page?

  This page was last modified on Jul 18, 2023 by MDN contributors.

  Your blueprint for a better internet.

  MDN

  Support

  Our communities

  Developers

  Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
  Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

  Источник

  transition-timing-function

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

  transition-timing-function представляет собой математическую функцию, показывающую, как быстро по времени меняется указанное через transition-property значение свойства. Начальная точка имеет координаты 0.0, 0.0, конечная — 1.0, 1.0, при этом функция по оси ординат может превышать эти значения в большую или меньшую сторону (рис. 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) . linear Одинаковая скорость от начала и до конца. step-start Как таковой анимации нет. Стилевые свойства сразу же принимают конечное значение. step-end Как таковой анимации нет. Стилевые свойства находятся в начальном значении заданное время, затем сразу же принимают конечное значение. steps Ступенчатая функция, имеющая заданное число шагов.

  transition-timing-function: steps(, start | end)

  Здесь: — целое число больше нуля; start — задаёт полунепрерывную снизу функцию; end — задаёт полунепрерывную сверху функцию. cubic-bezier Задаёт функцию движения в виде кривой Безье.

  Источник

  Читайте также:  Рисунок на коже питона