Стандартна крива плавності Material Design
Створіть власну функцію плавності CSS cubic-bezier(), перетягуючи дві контрольні точки, переглядайте результат поруч із лінійним рухом, а тоді копіюйте готове значення.
Обробляється повністю у вашому браузері — те, що ви тут вводите, ніколи не вивантажується.
Результат
Про цей інструмент
На цій сторінці генератор відкривається з уже завантаженими значеннями x1=0.4, y1=0, x2=0.2, y2=1 — стандартною кривою плавності, опублікованою в гайдлайнах із руху Material Design від Google. Перетягніть будь-який маркер або відредагуйте числа — крива, живий попередній перегляд і готовий CSS для копіювання оновлюються разом.
Material Design називає цю криву «стандартною плавністю» й рекомендує її для більшості переходів на екрані — елементів, які вже видимі й просто переміщуються, змінюють розмір або зникають у межах одного екрана. Її форма швидко прискорюється, а потім м'яко сповільнюється до місця призначення, через що багато застосунків для Android і вебінтерфейсів у стилі Material мають однакове відчуття переходів, хоча ніхто й не помічає, що вони використовують одні й ті самі чотири числа.
Вставте його прямо в transition-timing-function або animation-timing-function для відчуття в стилі Material або використовуйте як точку відліку: гайдлайни Material також визначають окремі криві «сповільнення» та «прискорення» для елементів, які входять на екран або залишають його, і цю стандартну криву не варто використовувати як заміну для них.