From e9643eeb455d4c95a683670b433ce189fbf56cff Mon Sep 17 00:00:00 2001 From: Alena Batitskaia Date: Sun, 12 Jul 2026 12:53:23 +0100 Subject: [PATCH 1/2] =?UTF-8?q?=D0=9E=D0=B1=D0=BD=D0=BE=D0=B2=D0=BB=D1=8F?= =?UTF-8?q?=D0=B5=D1=82=20=D0=B4=D0=BE=D0=BA=D1=83=20=D0=BF=D1=80=D0=BE=20?= =?UTF-8?q?`transition-timing-function`?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../demos/cubic-bezier/index.html | 62 ++-- .../demos/every/index.html | 279 +++++++++++++---- .../demos/jump/index.html | 282 ++++++++++-------- .../demos/step/index.html | 232 ++++++++------ css/transition-timing-function/index.md | 44 ++- 5 files changed, 596 insertions(+), 303 deletions(-) diff --git a/css/transition-timing-function/demos/cubic-bezier/index.html b/css/transition-timing-function/demos/cubic-bezier/index.html index cfbdcb70f5..da938b7750 100644 --- a/css/transition-timing-function/demos/cubic-bezier/index.html +++ b/css/transition-timing-function/demos/cubic-bezier/index.html @@ -6,11 +6,9 @@ - + - + + transition-timing-function: cubic-bezier(0.52, 0, 0.27, 2) diff --git a/css/transition-timing-function/demos/every/index.html b/css/transition-timing-function/demos/every/index.html index 6682a0eafe..4556f56fa6 100644 --- a/css/transition-timing-function/demos/every/index.html +++ b/css/transition-timing-function/demos/every/index.html @@ -4,10 +4,11 @@ Демонстрация разных временных функций — transition-timing-function — Дока + + + -
-
ease
-
ease-in
-
ease-out
-
ease-in-out
-
linear
-
cubic-bezier(0.2,-2,0.8,2)
+ + + +
+ +
+ +
+ +
+ + + + + +
+ linear +
+ +
+ + + + + +
+ linear(0, 0.5, 0.75, 0.85, 1) +
+ +
+ + + + + +
+ ease +
+ +
+ + + + + +
+ ease-in +
+ +
+ + + + + +
+ ease-out +
+ +
+ + + + + +
+ ease-in-out +
+ +
+ + + + + +
+ cubic-bezier(0.34, 1.56, 0.64, 1) +
+
+ diff --git a/css/transition-timing-function/demos/jump/index.html b/css/transition-timing-function/demos/jump/index.html index 7109f0f63c..b6fd166a92 100644 --- a/css/transition-timing-function/demos/jump/index.html +++ b/css/transition-timing-function/demos/jump/index.html @@ -8,9 +8,7 @@ -
-

Нажми на прямоугольник

-
- jump-start - start -
-
+ + + +

Нажми на строку, чтобы запустить переход

+ +
+ + +
+ +
+
+ jump-start +
+
+
+
-
- jump-end - end -
-
+
+ jump-end +
+
+
+
-
- jump-none -
-
+
+ jump-none +
+
+
+
-
- jump-both -
-
+
+ jump-both +
+
+
+
diff --git a/css/transition-timing-function/demos/step/index.html b/css/transition-timing-function/demos/step/index.html index af853742eb..841fad37f6 100644 --- a/css/transition-timing-function/demos/step/index.html +++ b/css/transition-timing-function/demos/step/index.html @@ -8,9 +8,7 @@ -
-

Нажми на прямоугольник

-
- step-start - start -
-
+ + + +

Нажми на строку, чтобы запустить переход

+ +
+ + +
+ +
+
+ step-start +
+
+
+
-
- step-end - end -
-
+
+ step-end +
+
+
+
diff --git a/css/transition-timing-function/index.md b/css/transition-timing-function/index.md index c2d1318739..64a334ba9a 100644 --- a/css/transition-timing-function/index.md +++ b/css/transition-timing-function/index.md @@ -1,10 +1,15 @@ --- title: "`transition-timing-function`" description: "Будет ли элемент меняться линейно или более причудливо?" +baseline: + - group: linear-easing + features: + - css.types.easing-function.linear-function authors: - ezhkov keywords: - функция времени + - linear() related: - css/animation-timing-function - css/transform-function @@ -51,6 +56,7 @@ tags: .selector { transition-timing-function: steps(4, jump-end); transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); + transition-timing-function: linear(0, 0.5, 0.75, 0.85, 1); } ``` @@ -71,7 +77,8 @@ tags: ```css .selector { - transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1); + transition-timing-function: + ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1); } ``` @@ -87,6 +94,28 @@ tags: ![Функция ease-out](images/2.png) +### Функция `linear()` + +Не путать с ключевым словом `linear` выше — это отдельная функция. Она задаёт кривую через набор контрольных точек прогресса, между которыми браузер интерполирует линейно. + +```css +.box { + transition-timing-function: linear(0, 0.5, 0.75, 0.85, 1); +} +``` + +Первое и последнее число — обычно `0` и `1` (начало и конец перехода), между ними можно указать сколько угодно промежуточных точек. Чем их больше, тем точнее можно приблизить сложную кривую, например «пружину», без `cubic-bezier()`. + +У каждой точки можно явно задать процент времени, к которому она должна быть достигнута: + +```css +.box { + transition-timing-function: linear(0, 0.25 75%, 1); +} +``` + +Без процентов точки распределяются по временной шкале равномерно. + ### Функция `cubic-bezier` В общем случае график функции описывается значением `cubic-bezier(p1, p2, p3, p4)`. В качестве параметров p1 и p3 обязательно должны быть числа от 0 до 1. @@ -99,7 +128,7 @@ tags: - `ease-out` — `cubic-bezier(0, 0, 0.58, 1.0)` - `ease-in-out` — `cubic-bezier(0.42, 0, 0.58, 1.0)` - + ### Функция `steps` @@ -124,12 +153,9 @@ tags: - или сделает 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)`. Изменение происходит скачком за один шаг. @@ -137,7 +163,7 @@ tags: `step-end` дожидается конца анимации и потом переходит в конечное состояние - + ## Подсказки @@ -145,4 +171,4 @@ tags: 💡 Задавая коэффициенты `p2` и `p4` меньше 0 или больше 1, можно добиться эффекта «пружины», что в некоторых случаях может сделать анимацию более интересной - + From bf57564ee7a6bd85956148a1d77f0f40f27a64a8 Mon Sep 17 00:00:00 2001 From: Alena Batitskaia Date: Sat, 18 Jul 2026 08:40:35 +0100 Subject: [PATCH 2/2] =?UTF-8?q?=D0=9E=D0=B1=D0=BD=D0=BE=D0=B2=D0=BB=D1=8F?= =?UTF-8?q?=D0=B5=D1=82=20=D0=B4=D0=B5=D0=BC=D0=BA=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../demos/every/index.html | 177 +++++++++--------- .../demos/jump/index.html | 99 ++++++---- .../demos/step/index.html | 74 +++++--- 3 files changed, 199 insertions(+), 151 deletions(-) diff --git a/css/transition-timing-function/demos/every/index.html b/css/transition-timing-function/demos/every/index.html index 4556f56fa6..bf1ab28e19 100644 --- a/css/transition-timing-function/demos/every/index.html +++ b/css/transition-timing-function/demos/every/index.html @@ -20,21 +20,35 @@ } body { - min-height: 100vh; + height: 100vh; + overflow: hidden; + background-color: #18191C; + color: #FFFFFF; + font-family: "Roboto", sans-serif; + } + + .page { + height: 100vh; + overflow-y: scroll; padding: 40px 24px; display: flex; flex-direction: column; align-items: center; gap: 24px; - background-color: #18191C; - color: #FFFFFF; - font-family: "Roboto", sans-serif; } .controls { + position: sticky; + top: -40px; + z-index: 1; + width: 100%; + padding: 12px 0; display: flex; + justify-content: center; align-items: center; gap: 12px; + background-color: #18191C; + box-shadow: 0 12px 16px -8px rgb(0 0 0 / 60%); } button { @@ -138,7 +152,7 @@ } @media (width <= 480px) { - body { + .page { padding: 30px 16px; } } @@ -146,89 +160,84 @@ - - -
- -
+
-
- -
- - - - - -
- linear -
- -
- - - - - -
- linear(0, 0.5, 0.75, 0.85, 1) -
- -
- - - - - -
- ease +
+
-
- - - - - -
- ease-in -
- -
- - - - - -
- ease-out -
- -
- - - - - -
- ease-in-out -
+
+ +
+ + + + + +
+ linear +
+ +
+ + + + + +
+ linear(0, 0.5, 0.75, 0.85, 1) +
+ +
+ + + + + +
+ ease +
+ +
+ + + + + +
+ ease-in +
+ +
+ + + + + +
+ ease-out +
+ +
+ + + + + +
+ ease-in-out +
+ +
+ + + + + +
+ cubic-bezier(0.34, 1.56, 0.64, 1) +
-
- - - - - -
- cubic-bezier(0.34, 1.56, 0.64, 1)
diff --git a/css/transition-timing-function/demos/jump/index.html b/css/transition-timing-function/demos/jump/index.html index b6fd166a92..42b2deae4b 100644 --- a/css/transition-timing-function/demos/jump/index.html +++ b/css/transition-timing-function/demos/jump/index.html @@ -20,15 +20,21 @@ } body { - min-height: 100vh; + height: 100vh; + overflow: hidden; + background-color: #18191C; + color: #FFFFFF; + font-family: "Roboto", sans-serif; + } + + .page { + height: 100vh; + overflow-y: scroll; padding: 40px 24px; display: flex; flex-direction: column; align-items: center; gap: 20px; - background-color: #18191C; - color: #FFFFFF; - font-family: "Roboto", sans-serif; } h3 { @@ -38,8 +44,16 @@ } .controls { + position: sticky; + top: -40px; + z-index: 1; + width: 100%; + padding: 12px 0; display: flex; + justify-content: center; gap: 12px; + background-color: #18191C; + box-shadow: 0 12px 16px -8px rgb(0 0 0 / 60%); } button { @@ -131,10 +145,18 @@ .jump-both .fill { transition-timing-function: steps(5, jump-both); } @media (width <= 480px) { - body { + .page { padding: 30px 16px; } + .controls { + flex-direction: column; + } + + button { + width: 100%; + } + .row { grid-template-columns: 1fr; gap: 8px; @@ -144,52 +166,49 @@ - +
-

Нажми на строку, чтобы запустить переход

+

Нажми на строку, чтобы запустить переход

-
- - -
+
+ + +
-
-
- jump-start -
-
-
+
+
+ jump-start +
+
+
+
-
-
- jump-end -
-
-
+
+ jump-end +
+
+
+
-
-
- jump-none -
-
-
+
+ jump-none +
+
+
+
-
-
- jump-both -
-
-
+
+ jump-both +
+
+
+
+