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