Генератор на cubic-bezier – собствени CSS криви на плавност
Генераторът на cubic-bezier ви позволява да проектирате CSS криви на плавност (easing), като влачите две контролни точки или започвате от пресет като ease, ease-in-out или back. Задайте продължителност, за да прегледате анимацията на живо, след което копирайте стойността cubic-bezier() или готов за употреба фрагмент за CSS преход. Това прави настройването на движението по-визуално, отколкото да редактирате стойностите на кривата самостоятелно.
Генераторът на cubic-bezier е визуален редактор за създаване на CSS криви на плавност. Вместо да се опитвате да извадите крива от числа, можете да влачите двете ѝ контролни точки и да виждате как се променя движението. Изберете стандартен пресет като ease, ease-in-out или back, след което задайте продължителност и наблюдавайте визуализация на анимация на живо.
Кривата е представена като CSS стойност cubic-bezier(), а инструментът може да предостави и готов фрагмент за преход. Започнете с един от стандартните пресети за плавност или настройте контролните точки, за да оформите персонализирана крива; настройката за продължителност определя времето, използвано във визуализацията. Копирайте резултата, който подхожда на вашата таблица със стилове или работен процес.
Стойността cubic-bezier() описва времето на плавност, а декларацията за CSS преход може да включва тази плавност заедно с продължителност. Генераторът предоставя както стойност на крива, така и готов фрагмент за преход, за да можете да копирате нивото на CSS детайл, от което се нуждаете. Визуалната визуализация може да улесни сравняването на движението, отколкото редактирането на стойностите на кривата, без да виждате резултата.
Генераторът на cubic-bezier работи изцяло във вашия браузър. Вашият вход се обработва на вашето устройство и не се качва, съхранява или изпраща до сървър. Работи офлайн, след като страницата е заредена, а инструментът е безплатен.
Този инструмент може да помогне на разработчици и DevOps инженери да подготвят стойности за плавност за интерфейси, тестове, данни за тестване или първоначални данни. Независимо дали учите как работи CSS плавността, или подобрявате съществуващо взаимодействие, можете да настроите крива, да я прегледате и да копирате резултата.
Стъпка 1: Изберете стандартен пресет за плавност като ease, ease-in-out или back, за да започнете с крива.
Стъпка 2: Влачете двете контролни точки, за да настроите визуално кривата и да оформите желаното движение.
Стъпка 3: Задайте продължителност, след което наблюдавайте визуализацията на живо, за да видите как се анимира кривата.
Стъпка 4: Копирайте създадената стойност cubic-bezier() или готовия за употреба фрагмент за CSS преход.
Случай на употреба: Създайте стойност cubic-bezier() за тестови случаи, данни за тестване или първоначални данни, когато проектът се нуждае от конкретна крива на плавност.
Случай на употреба: Създавайте серия от стойности, когато са ви нужни няколко криви наведнъж, вместо да измисляте всяка стойност ръчно.
Случай на употреба: Използвайте истински случайни стойности вместо предположения от клавиатурата, когато ви трябват случайни данни за крива.
Случай на употреба: Настройте визуално CSS преход, като коригирате контролните точки и преглеждате как се усеща движението.
Случай на употреба: Сравнете стандартен пресет като ease или ease-in-out с персонализирана крива, преди да я копирате в таблица със стилове.
Случай на употреба: Задайте продължителност и прегледайте анимация, за да проверите времето на взаимодействие в интерфейса.