Редактор на изглаждане Cubic-Bézier
Проектирайте персонализирани криви на изглаждане cubic-bezier с плъзгащ се редактор и преглед на анимация на живо.
Плъзнете двата манипулатора, за да оформите кривата на изглаждане.
transition-timing-function: —;
animation-timing-function: —;
Всичко работи във вашия браузър — нищо не се качва.
За Редактор на изглаждане Cubic-Bézier
Редакторът на кубична Безие крива за ускорение (easing) проектира персонализирани функции за време за CSS преходи и анимации. Плъзнете двете контролни дръжки върху платното с кривата и стойността cubic-bezier(x1, y1, x2, y2) се обновява на живо; преглед на анимацията възпроизвежда ускорението до линеен еталон, за да усетите разликата, с регулируема продължителност и мигновено повторение.
Десет шаблона покриват общия речник — стандартните ease, ease-in, ease-out и ease-in-out, плюс изразителни криви като back и anticipate, които надхвърлят крайните си точки, и material-стил ускоряващи и забавящи рампи. Използвайте ги както са или като отправна точка, която да преоформите.
Можете също да въведете точни координати на контролните точки, да натиснете „разбъркай“ за вдъхновение и да копирате или чистата стойност cubic-bezier(), или готово за поставяне CSS правило. Целият редактор работи във вашия браузър.
Как да използвате Редактор на изглаждане Cubic-Bézier
- Плъзнете двете дръжки в редактора на кривата, за да оформите ускорението.
- Кликнете „Повтори“ и сравнете анимацията с ускорение спрямо линейния еталон, като коригирате продължителността при нужда.
- Опитайте шаблоните — ease, back, anticipate, material и други — за бърза отправна точка.
- Прецизирайте с числовите полета за контролни точки за точни стойности.
- Копирайте стойността cubic-bezier() или пълния CSS фрагмент.