Tilpasse Overganger med Tidsfunksjoner
transition-timing-function angir hastighetskurven for en overgangseffekt. Den bestemmer hvor raskt en animasjon starter og stopper, samt tempoet den utvikler seg i.
transition-timing-function: time_function;
Det finnes sentrale nøkkelord som beskriver ulike time_functions:
ease– Standardverdi. En overgangseffekt med en treg start, deretter rask, og avsluttes sakte;linear– Konstant hastighet gjennom hele overgangen;ease-in– En overgangseffekt med en treg start;ease-out– En overgangseffekt med en treg avslutning;ease-in-out– En overgangseffekt med treg start og slutt, og rask midtdel.
Se følgende eksempel for å observere forskjellene mellom dem. Overgangen aktiveres kun ved hover på container.
index.html
index.css
Kubisk Bézier-kurve
Vi kan også bruke funksjonen cubic-bezier() for å lage en tilpasset timing-function. Denne funksjonen tar fire verdier som representerer kontrollpunktene til en kubisk Bézier-kurve, som bestemmer formen på timing-funksjonen.
Merk
Ingen grunn til bekymring. Det er ikke nødvendig med matematikkunnskaper for å generere cubic bezier-funksjonen som en css-verdi. Vi kan bruke https://cubic-bezier.com/ for å generere våre egne funksjoner.
La oss se på følgende eksempel for å vise hvor enkelt det er å bruke. cubic-bezier-funksjonen ble generert ved å dra punktene på den kilden.
Som et resultat kan vi kopiere funksjonen øverst til vår css-fil.
index.html
index.css
Takk for tilbakemeldingene dine!
Spør AI
Spør AI
Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår
Can you explain how to use the cubic-bezier function in a CSS transition?
What are some practical examples of using different timing functions?
How do I choose the best timing function for my animation?
Awesome!
Completion rate improved to 2.04Tilpasse Overganger med Tidsfunksjoner
Sveip for å vise menyen
transition-timing-function angir hastighetskurven for en overgangseffekt. Den bestemmer hvor raskt en animasjon starter og stopper, samt tempoet den utvikler seg i.
transition-timing-function: time_function;
Det finnes sentrale nøkkelord som beskriver ulike time_functions:
ease– Standardverdi. En overgangseffekt med en treg start, deretter rask, og avsluttes sakte;linear– Konstant hastighet gjennom hele overgangen;ease-in– En overgangseffekt med en treg start;ease-out– En overgangseffekt med en treg avslutning;ease-in-out– En overgangseffekt med treg start og slutt, og rask midtdel.
Se følgende eksempel for å observere forskjellene mellom dem. Overgangen aktiveres kun ved hover på container.
index.html
index.css
Kubisk Bézier-kurve
Vi kan også bruke funksjonen cubic-bezier() for å lage en tilpasset timing-function. Denne funksjonen tar fire verdier som representerer kontrollpunktene til en kubisk Bézier-kurve, som bestemmer formen på timing-funksjonen.
Merk
Ingen grunn til bekymring. Det er ikke nødvendig med matematikkunnskaper for å generere cubic bezier-funksjonen som en css-verdi. Vi kan bruke https://cubic-bezier.com/ for å generere våre egne funksjoner.
La oss se på følgende eksempel for å vise hvor enkelt det er å bruke. cubic-bezier-funksjonen ble generert ved å dra punktene på den kilden.
Som et resultat kan vi kopiere funksjonen øverst til vår css-fil.
index.html
index.css
Takk for tilbakemeldingene dine!
