JS властивість CSSStyleDeclaration.transitionTimingFunction

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

element.style.transitionTimingFunction – це властивість, яка дозволяє визначити швидкість зміни CSS-властивостей під час анімації переходу. Ця властивість задає криву прискорення для анімації, що дозволяє контролювати, як саме відбуватиметься зміна значень CSS-властивостей.

Основні значення transitionTimingFunction включають:

ease: повільний початок, потім швидше, а потім знову повільніше (за замовчуванням).
linear: рівномірна швидкість від початку до кінця.
ease-in: повільний початок, потім швидше.
ease-out: швидкий початок, потім повільніше.
ease-in-out: повільний початок, потім швидше, потім знову повільніше.
cubic-bezier(n, n, n, n): користувацька крива, що визначає точну форму анімації.

Щоб використовувати transitionTimingFunction, спочатку необхідно вибрати елемент, до якого ви хочете застосувати анімацію, і задати властивість переходу. Наприклад, для застосування плавної анімації зі значенням ease-in-out:

const element = document.getElementById('box');
element.style.transitionProperty = 'width';
element.style.transitionDuration = '2s';
element.style.transitionTimingFunction = 'ease-in-out';
element.style.width = '300px';

У цьому прикладі ми встановлюємо, що зміна ширини елемента буде тривати 2 секунди і матиме плавний початок та кінець зі швидшою серединою.

Якщо ви хочете використовувати користувацьку криву для анімації, можна застосувати cubic-bezier:

element.style.transitionTimingFunction = 'cubic-bezier(0.25, 0.1, 0.25, 1)';

Це дозволяє детально контролювати, як буде змінюватися швидкість анімації протягом її тривалості. Крива cubic-bezier визначається чотирма числами, що представляють дві точки контролю на кривій Безьє.

Для кількох властивостей можна задати різні функції таймінгу:

element.style.transitionProperty = 'width, height';
element.style.transitionDuration = '2s, 3s';
element.style.transitionTimingFunction = 'ease-in, linear';
element.style.width = '300px';
element.style.height = '200px';

У цьому прикладі зміна ширини відбуватиметься з плавним прискоренням на початку, а зміна висоти – з постійною швидкістю. Це дозволяє створювати складніші анімації, комбінуючи різні криві прискорення для різних властивостей.

Також transitionTimingFunction можна динамічно змінювати залежно від дій користувача:

element.addEventListener('mouseover', () => {
    element.style.transitionTimingFunction = 'ease-out';
    element.style.width = '400px';
});

element.addEventListener('mouseout', () => {
    element.style.transitionTimingFunction = 'ease-in';
    element.style.width = '100px';
});

Це дозволяє створювати інтерактивні ефекти, де швидкість анімації змінюється залежно від контексту.

Отже, element.style.transitionTimingFunction є потужним інструментом для створення плавних і привабливих анімацій на веб-сторінках, надаючи можливість детально контролювати швидкість зміни CSS-властивостей під час переходу.

Порада:	Пам'ятайте, що можна змінювати `transitionTimingFunction` динамічно залежно від дій користувача. Наприклад, можна використовувати більш плавну функцію таймінгу для наведених елементів і швидшу для зникнення, що додає гнучкості і робить взаємодію з елементами більш приємною та природною. Це особливо корисно для створення інтерактивних веб-додатків, де реакція на дії користувача повинна бути швидкою та інтуїтивною.
Порада:	Використовуйте `transitionTimingFunction` разом з анімаціями на псевдоелементах, таких як `::before` і `::after`, щоб додати візуальні ефекти без зміни основної структури елемента. Це дозволяє додавати додаткові декоративні анімації, такі як підкреслення або обведення, які можуть покращити загальний вигляд сторінки.
Порада:	Не бійтеся експериментувати з користувацькими кривими `cubic-bezier`, щоб створити індивідуальні анімаційні ефекти, які точно відповідають вашому дизайну. Використання цієї функції надає можливість налаштувати анімацію так, щоб вона відповідала будь-яким специфічним вимогам, створюючи унікальний візуальний досвід.

Синтаксис

element.style.transitionTimingFunction

Значення

Return

Переглядачі

Переглядач
	1	1	3	8	12

Переглядач
	4.4	18	4	1

Переглядач
	-	-

Приклади

Цей приклад дозволяє користувачам вибирати різні функції згладжування для анімації переміщення червоного блока за допомогою перемикачів. Коли користувач натискає кнопку "Animate", блок переміщається з лівого краю до правого і назад, використовуючи вибрану функцію згладжування, що демонструє, як функція transitionTimingFunction впливає на анімацію.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/NWZjpLK">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

Цей приклад показує, як використовувати transitionTimingFunction для створення плавного розширення та звуження елемента з різними таймінгами. При наведенні курсору на елемент його ширина змінюється з використанням ease-in, що створює повільний початок і швидкий кінець, а висота змінюється з використанням ease-out, що створює швидкий початок і повільний кінець. Це додає візуальної динаміки та підвищує інтуїтивність взаємодії з користувачем.

const element = document.getElementById('box');
element.style.transitionProperty = 'width, height';
element.style.transitionDuration = '2s, 3s';
element.style.transitionTimingFunction = 'ease-in, ease-out';

element.addEventListener('mouseover', () => {
    element.style.width = '300px';
    element.style.height = '200px';
});

element.addEventListener('mouseout', () => {
    element.style.width = '100px';
    element.style.height = '100px';
});

У цьому прикладі ми використовуємо transitionTimingFunction з користувацькою кривою cubic-bezier для зміни кольору фону і стандартний таймінг ease для трансформації. Коли користувач натискає на елемент, колір фону змінюється з унікальною кривою, яка створює нестандартний прискорення та уповільнення, а елемент обертається з використанням плавного таймінгу. Це дозволяє створювати більш виразні та оригінальні анімації, які привертають увагу і додають інтерактивності.

const element = document.getElementById('box');
element.style.transitionProperty = 'background-color, transform';
element.style.transitionDuration = '1.5s, 2s';
element.style.transitionTimingFunction = 'cubic-bezier(0.68, -0.55, 0.27, 1.55), ease';

element.addEventListener('click', () => {
    element.style.backgroundColor = 'blue';
    element.style.transform = 'rotate(45deg)';
});

JS довідник

Events

JavaScript

Statements