CSS-easing у стилі відскоку
Створюйте власну CSS-функцію часу cubic-bezier(), перетягуючи дві контрольні точки, перегляньте її наживо поруч із лінійним еталоном і скопіюйте готове значення.
Результат
Ця сторінка відкриває генератор із уже завантаженими x1=0.68, y1=-0.55, x2=0.265, y2=1.55 — кривою з перельотом, яку деякі бібліотеки easing називають easeOutBack. Саме через від'ємний y1 і y2 вище 1 прев'ю анімації нижче відтягується назад перед стартом і перелітає за кінець, перш ніж осісти; тягніть будь-яку точку або редагуйте числа, щоб посилити чи послабити ефект.
Чесно про те, чим це є: одна крива cubic-bezier() має лише дві контрольні точки, тож вона може наблизити один переліт-і-осідання, а не справжній фізичний відскок із кількома згасаючими стрибками. Для буквального відскоку м'яча знадобилися б кілька keyframe- або steps()-сегментів разом — ця крива є найближчим, на що здатна одна проста transition-timing-function.
Той єдиний переліт — саме те, чого хоче більшість пружного інтерфейсу: кнопка, що трохи перескакує свій розмір спокою, модальне вікно, що перелітає перед тим як осісти, картка, що пружно стає на місце. Скопіюйте значення як є для цього різкого відчуття або пом'якшіть y1 до 0, а y2 до 1, щоб зменшити переліт.