De verkliga siffrorna bakom CSS är lätta-in-ut
Designa en anpassad CSS cubic-bezier()-timingfunktion genom att dra två kontrollpunkter, förhandsgranska den live mot en linjär referens och kopiera sedan färdigvärdet.
Resultat
Den här sidan öppnar cubic-bezier-generatorn med x1=0,42, y1=0, x2=0,58, y2=1 redan laddade – de exakta kontrollpunkterna som CSS-ease-in-out-sökordet expanderar till. Dra antingen handtaget eller redigera siffrorna direkt, och kurvan, förhandsgranskningen av animeringen och den kopierbara strängen uppdateras omedelbart.
ease-in-out är ett av de fem inbyggda CSS-timingsnyckelorden, och det är populärt just för att den här kurvan accelererar försiktigt från början, håller en ganska jämn takt genom mitten och lättar ner innan slutet – en form som är naturlig för de flesta UI-rörelser. Att se det som explicita kontrollpunkter istället för ett nyckelordsnamn gör det uppenbart varför: y1 sitter nära 0 och y2 sitter nära 1, båda nära deras matchande x, så det finns ingen överskjutning i någon riktning.
Använd dessa fyra siffror som utgångspunkt snarare än själva nyckelordet när du behöver skjuta på känslan något - dra ner x1 för en snabbare start, eller tryck y2 över 1 för att förvandla samma form till en försiktig översvängning. Varje ändring uppdaterar förhandsgranskningen och den kopierbara cubic-bezier()-raden direkt.