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 динамічно залежно від дій користувача. Наприклад, можна використовувати більш плавну функцію таймінгу для наведених елементів і швидшу для зникнення, що додає гнучкості і робить взаємодію з елементами більш приємною та природною. Це особливо корисно для створення інтерактивних веб-додатків, де реакція на дії користувача повинна бути швидкою та інтуїтивною.

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

Порада

Використовуйте transitionTimingFunction разом з анімаціями на псевдоелементах, таких як ::before і ::after, щоб додати візуальні ефекти без зміни основної структури елемента. Це дозволяє додавати додаткові декоративні анімації, такі як підкреслення або обведення, які можуть покращити загальний вигляд сторінки.

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

Порада

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

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

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

Синтаксис

element.style.transitionTimingFunction

Переглядачі

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

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

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

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

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

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

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

Приклади

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

<div id="box">Демонстраційний елемент</div>

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)';
});

<div id="box">Демонстраційний елемент</div>

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';
});