CSS easing- en transitiegenerator
Genereer een CSS-transitieregel van een vooraf ingestelde of aangepaste cubic-bezier-curve, met een tekstgrafiek van de beweging.
CSS easing- en transitiegenerator
Kies de eigenschappen die je wilt animeren, stel een duur en vertraging in, en deze tool schrijft de transitieregel voor je — als gewone CSS of als een Tailwind-configuratieblok die je in tailwind.config.js kunt plakken. Het omvat de gebruikelijke benoemde curves (linear, ease, ease-in, ease-out, ease-in-out) plus ease-out-back, een curve die voorbij zijn doel uitsteekt voordat het zich inzet, wat geen native CSS-trefwoord is en altijd als volledige cubic-bezier()-functie moet worden geschreven.
Onder de gegenereerde regel tekent een tekstgrafiek de voortgang van de curve op elk moment in de tijd — van 0 aan het begin van de animatie tot 1 aan het einde, met een balk voor elk monster zodat je de versnelling en overshoot kunt zien zonder de developer tools te openen. Schakel over naar "Aangepaste cubic-bezier()" en voer je eigen vier controlepunten in om een preview van een curve te zien die iemand je heeft gegeven, of een die je uit een ontwerptool hebt gekopieerd. De eerste en derde punten moeten tussen 0–1 op de tijdas blijven (dat is een CSS-vereiste), maar de y-waarden kunnen buiten 0–1 gaan, wat precies is hoe bounce- en back-easings werken.
Het eigenschappenveld accepteert een kommagescheiden lijst — transform, opacity, background-color, of een aangepaste CSS-eigenschap zoals --panel-width — en de tool schrijft één regel per eigenschap zodat de regel gemakkelijk te scannen is. Duur en vertraging zijn in milliseconden. Het aantal grafiekrijen kan worden aangepast van 2 tot 41 voor een grover of fijner lezen van de curve.
Alles wordt lokaal in je browser gegenereerd: niets wat je typt, wordt ergens naartoe gestuurd. Kopieer het resultaat, download het als een .txt-bestand, of stuur de uitvoer rechtstreeks terug naar de invoer om het verder aan te passen.