CSS transition-timing-function — плавність переходу

Властивість transition-timing-function встановлює не лінійну швидкість ефекту переходу, іншими словами, ця властивість задає криву, по якій буде змінюватись значення, що відслідковується.

Початкова точка має координати 0.0, 0.0, кінцева - 1.0, 1.0, при цьому функція по осі ординат може перевищувати ці значення в більшу або меншу сторони. В якості значень можна використовувати як ключові слова, так і спеціальні часові функції.

Ви також можете задавати одночасно декілька значень, відділяючи їх комами. Кожна з них буде задана автоматично для відповідної властивості у transition-property, по-черзі. Зайві значення ігноруватимуться. Якщо для властивості не вистачає значення, або не задана transition-timing-function, вона приймає значення без задання: ease.

На цьому прикладі Ви бачите два блоки. Для лівого задана CSS-функція, для того, що праворуч - ключове слово, яке означає "однакові зміни протягом усього часу":

Зображення графіків роботи значень властивості зображено на рисунку нижче.

правити

Загальний опис

правити

Нотатка

Завжди вказуйте властивість transition-duration, якщо цього не зробити тривалість переходу буде 0s, тому перехід не матиме ніякого ефекту.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit;

Властивість transition-timing-function може отримувати 11 значень:

linear

Стала швидкість від початку і до кінця ефекту.

автор: Svitlana

правити

ease

Анімація починається повільно, потім прискорюється і до кінця руху знову сповільнюється. Аналогічно cubic-bezier (0.25,0.1,0.25,1). Без задання.

автор: Svitlana

правити

ease-in

Анімація починається повільно, а до кінця прискорюється. Аналогічно cubic-bezier(0.42,0,1,1).

автор: Svitlana

правити

ease-out

Анімація починається швидко, а до кінця сповільнюється. Аналогічно cubic-bezier(0,0,0.58,1).

автор: Svitlana

правити

ease-in-out

Анімація починається і закінчується повільно. Аналогічно cubic-bezier(0.42,0,0.58,1).

автор: Svitlana

правити

step-start

Анімації немає. Стильові властивості відразу ж приймають кінцеве значення.

автор: Svitlana

правити

step-end

Як такої анімації немає. Початкове значення перебуває в початковому значенні увесь час переходу і в останнівй момент приймає кінцеве значення.

автор: Svitlana

правити

steps(int,start|end)

Ступінчаста функція, що має задане число кроків.

автор: Svitlana

правити

cubic-bezier(n,n,n,n)

Задає функцію руху у вигляді кривої Безьє.

автор: Svitlana

правити

initial

Встановлює властивість у значення без задання

автор: Svitlana

правити

inherit

Вказує на спадковість властивості від свого батьківського елемента.

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	26	16	9	12.1	12	10

Підтримка: мобільні переглядачі

Переглядач
	4.4	26	16	9

Приклади

+ запропонувати свій приклад у пісочниці

<div class="track">
    <div class="lin">linear</div>
    <div class="eas">ease</div>
</div>
<p>Наведи курсор на смугу вище.</p>

.track div {
    width: 100px;
    padding: 6px;
    margin-bottom: 6px;
    background: #0172ad;
    color: #fff;
    transition: width 2s;
}

.track:hover div {
    width: 300px;
}

.lin { transition-timing-function: linear; }
.eas { transition-timing-function: ease; }

<p>Різні значення для <code>transition-timing-function</code> у дії:</p>

<hr>

<div class="wrapper">
  <div class="block block-1">
    <span>linear</span>
  </div>
  <div class="block block-2">
    <span>ease</span>
  </div>
  <div class="block block-3">
    <span>ease-in</span>
  </div>
  <div class="block block-4">
    <span>ease-out</span>
  </div>
  <div class="block block-5">
    <span>ease-in-out</span>
  </div>
</div>

<div class="wrapper">
  <div class="block block-6">
    <span>step-end</span>
  </div>
  <div class="block block-7">
    <span>step-start</span>
  </div>
  <div class="block block-8">
    <span>steps(5, end)</span>
  </div>
  <div class="block block-9">
    <span>cubic-bezier(0.25, 0.1, 0.25, 3.0)</span>
  </div>
</div>

body {
  padding: 36px;
  text-align: center;
  font-family: monospace;
  font-size: 17px;
  color: #222;
  line-height: 1.45; 
}

#btn {
  cursor: pointer;
  width: 250px;
  text-align: center;
  padding: 6px 12px;
  font-size: 19px;
  display: inline-block;
}

.wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  height: 350px;
  background-color: #eee;
  margin-bottom: 16px;
}

.block {
  background-color: red;
  padding: 26px 8px;
  width: 125px;
  margin: 2px;
  text-align: center;
  color: #fff;
  font-size: 15px;
  border: 2px solid rgba(255, 255, 255, .45);
  transition: all .25s ease 0s;
}

.block:hover {
  background-color: gold;
  color: #444;
  border-color: #666;
}

.block-1 {
  transition-timing-function: ease-in;
}
.block-2 {
  transition-timing-function: linear;
}
.block-3 {
  transition-timing-function: ease-in;
}
.block-4 {
  transition-timing-function: ease-out;
}
.block-5 {
  transition-timing-function: ease-in-out;
}
.block-6 {
  transition-timing-function: step-end;
}
.block-7 {
  transition-timing-function: step-start;
}
.block-8 {
  transition-timing-function: steps(5, end);
}
.block-9 {
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 3.0);
}

var blocks = document.getElementsByClassName('block');
var btn = document.getElementById('btn');

btn.onclick = function () {
  for (var i = 0; i < blocks.length; i++) {if (window.CP.shouldStopExecution(0)) break;
    blocks[i].style.animationPlayState = blocks[i].style.animationPlayState == 'paused' ? 'running' : 'paused';
    btn.innerHTML = blocks[i].style.animationPlayState == 'paused' ? 'Запустити анімацію' : 'Зупинити анімацію';
  }window.CP.exitedLoop(0);
};
//# sourceURL=pen.js

<div class="wrapper">
  <div class="block block-1">
    <span>cubic-bezier(0.25, 0.1, 0.25, 3.0)</span>
  </div>
  <div class="block block-2">
    <span>linear</span>
  </div>
</div>

body {
  padding: 36px;
  text-align: center;
  font-family: monospace;
  font-size: 17px;
  color: #222;
  line-height: 1.45; 
}

#btn {
  cursor: pointer;
  width: 250px;
  text-align: center;
  padding: 6px 12px;
  font-size: 19px;
  display: inline-block;
}

.wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.block {
  background-color: red;
  padding: 26px 8px;
  width: 175px;
  text-align: center;
  color: #fff;
  font-size: 15px;
  border: 2px solid rgba(255, 255, 255, .45);
  transition: all .25s linear 0s;
}

.block:hover {
  background-color: gold;
  border-color: #666;
  color: #444;
}

.block-1 {
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 3.0);
}