Tilpasning af Overgange med Timing-Funktioner
transition-timing-function angiver hastighedskurven for en transitionseffekt. Den bestemmer, hvor hurtigt en animation starter og stopper, samt tempoet for dens forløb.
transition-timing-function: time_function;
Der findes vigtige nøgleord, der beskriver de forskellige time_functions:
ease- Standardværdi. En transitionseffekt med en langsom start, derefter hurtig, og slutter langsomt;linear- Har en konstant hastighed gennem hele transitionen;ease-in- En transitionseffekt med en langsom start;ease-out- En transitionseffekt med en langsom afslutning;ease-in-out- En transitionseffekt med en langsom start og afslutning, og et hurtigt midterstykke.
Kør følgende eksempel for at se forskellen mellem dem. Transitionen fungerer kun ved hover på container.
index.html
index.css
Cubic Bezier-kurve
Vi kan også bruge funktionen cubic-bezier() til at oprette en brugerdefineret timing-function. Denne funktion tager fire værdier, der repræsenterer kontrolpunkterne for en cubic bezier-kurve, hvilket bestemmer formen på timing-funktionen.
Bemærk
Ingen grund til bekymring. Vi behøver ikke matematisk viden for at generere cubic bezier-funktionen som en css-egenskabsværdi. Vi kan bruge https://cubic-bezier.com/ til at generere vores brugerdefinerede funktioner.
Lad os se på følgende eksempel for at se, hvor nemt det er at bruge. cubic-bezier-funktionen blev genereret ved at trække punkterne på den nævnte kilde.
Som resultat kan vi kopiere funktionen øverst til vores css-fil.
index.html
index.css
Tak for dine kommentarer!
Spørg AI
Spørg AI
Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat
Awesome!
Completion rate improved to 2.04Tilpasning af Overgange med Timing-Funktioner
Stryg for at vise menuen
transition-timing-function angiver hastighedskurven for en transitionseffekt. Den bestemmer, hvor hurtigt en animation starter og stopper, samt tempoet for dens forløb.
transition-timing-function: time_function;
Der findes vigtige nøgleord, der beskriver de forskellige time_functions:
ease- Standardværdi. En transitionseffekt med en langsom start, derefter hurtig, og slutter langsomt;linear- Har en konstant hastighed gennem hele transitionen;ease-in- En transitionseffekt med en langsom start;ease-out- En transitionseffekt med en langsom afslutning;ease-in-out- En transitionseffekt med en langsom start og afslutning, og et hurtigt midterstykke.
Kør følgende eksempel for at se forskellen mellem dem. Transitionen fungerer kun ved hover på container.
index.html
index.css
Cubic Bezier-kurve
Vi kan også bruge funktionen cubic-bezier() til at oprette en brugerdefineret timing-function. Denne funktion tager fire værdier, der repræsenterer kontrolpunkterne for en cubic bezier-kurve, hvilket bestemmer formen på timing-funktionen.
Bemærk
Ingen grund til bekymring. Vi behøver ikke matematisk viden for at generere cubic bezier-funktionen som en css-egenskabsværdi. Vi kan bruge https://cubic-bezier.com/ til at generere vores brugerdefinerede funktioner.
Lad os se på følgende eksempel for at se, hvor nemt det er at bruge. cubic-bezier-funktionen blev genereret ved at trække punkterne på den nævnte kilde.
Som resultat kan vi kopiere funktionen øverst til vores css-fil.
index.html
index.css
Tak for dine kommentarer!
