Cubic bezier-generator: sleep een easing-curve, kopieer CSS | We.Inc
Sleep twee handvatten om een cubic-bezier() easing-curve te vormen, laat die racen tegen linear en ease, begin bij de keywords uit de specificatie of Tailwind-presets en kopieer CSS of een Tailwind-class.
Een cubic-bezier(x1, y1, x2, y2) easing-curve loopt van 0,0 naar 1,1 en wordt gebogen door twee controlepunten. Beide x-waarden moeten tussen 0 en 1 blijven, anders negeert de browser de hele declaratie, terwijl y-waarden onder 0 of boven 1 mogen gaan om door te schieten. Sleep de handvatten hieronder en kijk hoe de stippen racen.
De CSS easing-keywords als cubic-bezier()-waarden (CSS Easing Functions Level 1)
Keyword
cubic-bezier()-waarde
Voelt als
cubic-bezier(0, 0, 1, 1)
Constante snelheid, mechanisch
ease (de standaard)
cubic-bezier(0.25, 0.1, 0.25, 1)
Snelle start, lange zachte stop
cubic-bezier(0.42, 0, 1, 1)
Langzame start, abrupte stop
cubic-bezier(0, 0, 0.58, 1)
Snelle start, zachte landing
cubic-bezier(0.42, 0, 0.58, 1)
Zacht aan beide kanten
Vier getallen typen en raden hoe ze aanvoelen werkt zelden. Hier vormt u de curve met de hand, ziet u de getallen meeveranderen en vergelijkt u de beweging naast een rechte lijn en de standaard van de browser voordat u iets in uw stylesheet plakt.
Sleep de blauwe en roze handvatten op de grafiek, of typ exacte getallen in de vier velden. De x-velden worden begrensd tot het bereik van 0 tot 1.
Druk op Afspelen om drie stippen tegelijk over de baan te sturen: uw curve, linear en ease.
Kies een preset om te beginnen bij de keywords uit de specificatie, de standaardwaarden van Tailwind of een van onze overshoot-curves.
Kopieer de CSS-declaratie of de arbitrary class voor Tailwind.
Gebruik ease-out voor dingen die het scherm binnenkomen en ease-in voor dingen die het verlaten. Elementen die tussen twee plekken op het scherm bewegen zien er meestal het best uit met ease-in-out.
Een y1 boven 1 laat de beweging voorbij het doel schieten en terugveren. Houd de overshoot klein voor interfacebeweging, ongeveer 1.2 tot 1.6.
Korte duur verbergt verschillen tussen curves. Beoordeel een curve op 600 milliseconden of meer en maak hem daarna korter.
Respecteer mensen die om minder beweging vragen: zet grote bewegingen binnen @media (prefers-reduced-motion: no-preference).
Veelgestelde vragen
Wat betekenen de vier getallen in cubic-bezier()?
Het zijn de coördinaten van de twee controlepunten: x1 en y1 voor het eerste, x2 en y2 voor het tweede. De x-as is het deel van de duur dat verstreken is en de y-as is hoe ver de geanimeerde waarde gevorderd is.
Waarom wordt mijn cubic-bezier genegeerd?
Als een van beide x-waarden lager dan 0 of hoger dan 1 is, is de functie ongeldig en gooit de browser de declaratie weg, waarna de waarde geldt die daarvoor van toepassing was. Controleer of x1 en x2 tussen 0 en 1 liggen.
Zijn ease-in en ease-out van Tailwind hetzelfde als de CSS-keywords?
Nee. Het standaardthema van Tailwind definieert ease-in als cubic-bezier(0.4, 0, 1, 1), ease-out als cubic-bezier(0, 0, 0.2, 1) en ease-in-out als cubic-bezier(0.4, 0, 0.2, 1), wat afwijkt van de CSS-keywords met dezelfde naam. Beide sets staan als presets in de editor zodat u ze kunt vergelijken.
Hoe gebruik ik een eigen curve in Tailwind?
Schrijf de waarde tussen vierkante haken zonder spaties, bijvoorbeeld ease-[cubic-bezier(0.34,1.56,0.64,1)]. Om hem te hergebruiken declareert u een themavariabele zoals --ease-springy in @theme, waarna Tailwind een ease-springy-class aanmaakt.
Kan een bezier-curve een stuiter met meerdere sprongen maken?
Nee. Eén kubische curve kan één keer doorschieten en terugkomen, maar niet meerdere keren stuiteren. Gebruik voor een stuiter met meerdere sprongen @keyframes met meerdere stappen of de nieuwere functie linear(), die een lijst met punten accepteert.
De grafiek lezen
Tijd loopt van links naar rechts en voortgang van onder naar boven. Een steil stuk van de curve betekent snelle beweging, een vlak stuk betekent dat het element nauwelijks beweegt. De lijn van hoek tot hoek is lineaire beweging.
Handvatten boven de bovenrand of onder de onderrand duwen de voortgang even voorbij 100 procent of onder 0 procent. Zo krijgt u een zachte overshoot zonder keyframes te schrijven.
Waar de curve in CSS komt
Dezelfde waarde werkt in transition-timing-function, animation-timing-function en de shorthands transition en animation. Binnen @keyframes geldt een timing function op een keyframe alleen voor het stuk tot de volgende keyframe.
Sommige eigenschappen kunnen niet onder nul gaan, zoals opacity of een breedte. Als een curve onder 0 doorschiet, worden die waarden begrensd, dus de dip is gewoon niet zichtbaar.
Presetwaarden
De eerste vijf komen uit de specificatie CSS Easing Functions. De rijen voor Tailwind zijn het standaardthema van dat framework. De overshoot-rijen zijn startpunten die we op het oog hebben afgesteld.
Elke preset in de editor
Naam
Bron
Waarde
CSS-keyword
cubic-bezier(0, 0, 1, 1)
CSS-keyword
cubic-bezier(0.25, 0.1, 0.25, 1)
CSS-keyword
cubic-bezier(0.42, 0, 1, 1)
CSS-keyword
cubic-bezier(0, 0, 0.58, 1)
CSS-keyword
cubic-bezier(0.42, 0, 0.58, 1)
ease-in (Tailwind)
Standaard in Tailwind
cubic-bezier(0.4, 0, 1, 1)
ease-out (Tailwind)
Standaard in Tailwind
cubic-bezier(0, 0, 0.2, 1)
ease-in-out (Tailwind)
Standaard in Tailwind
cubic-bezier(0.4, 0, 0.2, 1)
verende uitloop
Overshoot
cubic-bezier(0.34, 1.56, 0.64, 1)
Overshoot
cubic-bezier(0.6, -0.4, 0.4, 1.4)
Overshoot
cubic-bezier(0.2, 0.9, 0.3, 1.1)
Een eigen curve gebruiken
Hover-kaart met een overshoot
Beweeg over de kaart. Hij komt iets voorbij zijn rustpunt omhoog en zakt terug, puur door de timing function.
Tailwind: eenmalige class en een herbruikbare thema-token
De vorm met haken heeft geen spaties nodig. De @theme-variabele maakt van de curve een class met een naam.
Easing-curve-editor
Sleep de handvatten of typ waarden, druk op Afspelen om uw curve te laten racen tegen linear en ease, en kopieer daarna de CSS of de Tailwind-class.
CSS-keyword
CSS-keyword
CSS-keyword
CSS-keyword
CSS-keyword
Standaard in Tailwind
Standaard in Tailwind
Standaard in Tailwind
Overshoot
Overshoot
Overshoot
Grafiek van de easing-curve. Sleep de twee handvatten om de curve te wijzigen.
Eerste controlepunt
Tweede controlepunt
Easing-presets
Duur: {n} ms
Afspelen
Uw curve
CSS kopiëren
Tailwind-class kopiëren
Deze curve is gelijk aan het CSS-keyword {v}.
x-waarden blijven tussen 0 en 1. y-waarden mogen doorschieten.