CSS Easing Curve в стил Bounce
Проектирайте персонализирана CSS cubic-bezier() функция за синхронизиране чрез плъзгане на две контролни точки, прегледайте я на живо спрямо линейна препратка, след което копирайте готовата стойност.
Резултат
Тази страница отваря генератора с вече заредени x1=0,68, y1=-0,55, x2=0,265, y2=1,55 — крива на превишаване, някои библиотеки за облекчаване етикетират easeOutBack. Отрицателното y1 и y2 над 1 са точно причината визуализацията на анимацията по-долу да се върне назад след началото и края си, преди да се установи; плъзнете или манипулирайте, или редактирайте числата, за да направите ефекта по-силен или по-мек.
Честно казано какво е това: една крива cubic-bezier() има само две контролни точки, така че може да апроксимира едно превишаване и установяване на движение, а не истинско физическо отскачане с множество отскоци с няколко намаляващи скока. За буквален ефект на отскачане на топка ще ви трябват множество ключови кадри или steps() сегменти, свързани заедно - тази крива е най-близката, която обикновена функция за синхронизиране на прехода може да получи в един ред.
Това единично превишаване все още е точно това, което повечето подскачащи потребителски интерфейси искат: бутон, който изскача малко над размера си в покой, модал, който превишава преди да се установи, карта, която изскача на място. Копирайте стойността такава, каквато е, за това бързо усещане или смекчете y1 към 0 и y2 към 1, за да върнете превишението.