Anpassa Övergångar med Tidsfunktioner
transition-timing-function anger hastighetskurvan för en transitionseffekt. Den bestämmer hur snabbt en animation startar och slutar samt tempot för dess förlopp.
transition-timing-function: time_function;
Det finns viktiga nyckelord som beskriver olika time_functions:
ease- Standardvärde. En transitionseffekt med en långsam start, sedan snabb, och avslutas långsamt;linear- Har konstant hastighet genom hela transitionen;ease-in- En transitionseffekt med en långsam start;ease-out- En transitionseffekt med ett långsamt slut;ease-in-out- En transitionseffekt med en långsam start och slut, och en snabb mitt.
Kör följande exempel för att se skillnaden mellan dem. Transitionen fungerar endast vid hover på container.
index.html
index.css
Kubisk Bézierkurva
Vi kan också använda funktionen cubic-bezier() för att skapa en anpassad timing-function. Denna funktion tar fyra värden som representerar kontrollpunkterna för en kubisk Bézierkurva, vilket avgör formen på timing-funktionen.
Obs
Ingen fara. Vi behöver inte ha matematikkunskaper för att generera cubic bezier-funktionen som ett css-egenskapsvärde. Vi kan använda https://cubic-bezier.com/ för att generera våra egna funktioner.
Låt oss titta på följande exempel för att se hur enkelt det är att använda. cubic-bezier-funktionen genererades genom att dra punkterna på den källan.
Som ett resultat kan vi kopiera funktionen högst upp till vår css-fil.
index.html
index.css
Tack för dina kommentarer!
Fråga AI
Fråga AI
Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal
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.04Anpassa Övergångar med Tidsfunktioner
Svep för att visa menyn
transition-timing-function anger hastighetskurvan för en transitionseffekt. Den bestämmer hur snabbt en animation startar och slutar samt tempot för dess förlopp.
transition-timing-function: time_function;
Det finns viktiga nyckelord som beskriver olika time_functions:
ease- Standardvärde. En transitionseffekt med en långsam start, sedan snabb, och avslutas långsamt;linear- Har konstant hastighet genom hela transitionen;ease-in- En transitionseffekt med en långsam start;ease-out- En transitionseffekt med ett långsamt slut;ease-in-out- En transitionseffekt med en långsam start och slut, och en snabb mitt.
Kör följande exempel för att se skillnaden mellan dem. Transitionen fungerar endast vid hover på container.
index.html
index.css
Kubisk Bézierkurva
Vi kan också använda funktionen cubic-bezier() för att skapa en anpassad timing-function. Denna funktion tar fyra värden som representerar kontrollpunkterna för en kubisk Bézierkurva, vilket avgör formen på timing-funktionen.
Obs
Ingen fara. Vi behöver inte ha matematikkunskaper för att generera cubic bezier-funktionen som ett css-egenskapsvärde. Vi kan använda https://cubic-bezier.com/ för att generera våra egna funktioner.
Låt oss titta på följande exempel för att se hur enkelt det är att använda. cubic-bezier-funktionen genererades genom att dra punkterna på den källan.
Som ett resultat kan vi kopiera funktionen högst upp till vår css-fil.
index.html
index.css
Tack för dina kommentarer!
