Overgangen Aanpassen Met Timingfuncties
De transition-timing-function specificeert de snelheidskromme van een overgangseffect. Het bepaalt hoe snel een animatie begint en eindigt, en het tempo waarmee deze verloopt.
transition-timing-function: time_function;
Er zijn essentiële sleutelwoorden die de verschillende time_functions beschrijven:
ease- Standaardwaarde. Een overgangseffect met een langzame start, daarna snel, en eindigt langzaam;linear- Heeft een constante snelheid gedurende de hele overgang;ease-in- Een overgangseffect met een langzame start;ease-out- Een overgangseffect met een langzaam einde;ease-in-out- Een overgangseffect met een langzame start en einde, en een snel midden.
Bekijk het volgende voorbeeld om het verschil tussen deze functies te zien. De overgang werkt alleen bij hover op de container.
index.html
index.css
Cubic Bezier-curve
We kunnen ook de functie cubic-bezier() gebruiken om een aangepaste timing-function te creëren. Deze functie neemt vier waarden die de controlepunten van een cubic bezier-curve vertegenwoordigen, wat de vorm van de timingfunctie bepaalt.
Opmerking
Geen zorgen. We hebben geen wiskundige kennis nodig om de cubic bezier-functie als CSS-eigenschap te genereren. We kunnen de https://cubic-bezier.com/ bron gebruiken om onze aangepaste functies te genereren.
Laten we het volgende voorbeeld bekijken om te zien hoe eenvoudig het is om te gebruiken. De cubic-bezier-functie is gegenereerd door de punten op die bron te verslepen.
Daardoor kunnen we de functie bovenaan kopiëren naar ons css-bestand.
index.html
index.css
Bedankt voor je feedback!
Vraag AI
Vraag AI
Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.
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.04Overgangen Aanpassen Met Timingfuncties
Veeg om het menu te tonen
De transition-timing-function specificeert de snelheidskromme van een overgangseffect. Het bepaalt hoe snel een animatie begint en eindigt, en het tempo waarmee deze verloopt.
transition-timing-function: time_function;
Er zijn essentiële sleutelwoorden die de verschillende time_functions beschrijven:
ease- Standaardwaarde. Een overgangseffect met een langzame start, daarna snel, en eindigt langzaam;linear- Heeft een constante snelheid gedurende de hele overgang;ease-in- Een overgangseffect met een langzame start;ease-out- Een overgangseffect met een langzaam einde;ease-in-out- Een overgangseffect met een langzame start en einde, en een snel midden.
Bekijk het volgende voorbeeld om het verschil tussen deze functies te zien. De overgang werkt alleen bij hover op de container.
index.html
index.css
Cubic Bezier-curve
We kunnen ook de functie cubic-bezier() gebruiken om een aangepaste timing-function te creëren. Deze functie neemt vier waarden die de controlepunten van een cubic bezier-curve vertegenwoordigen, wat de vorm van de timingfunctie bepaalt.
Opmerking
Geen zorgen. We hebben geen wiskundige kennis nodig om de cubic bezier-functie als CSS-eigenschap te genereren. We kunnen de https://cubic-bezier.com/ bron gebruiken om onze aangepaste functies te genereren.
Laten we het volgende voorbeeld bekijken om te zien hoe eenvoudig het is om te gebruiken. De cubic-bezier-functie is gegenereerd door de punten op die bron te verslepen.
Daardoor kunnen we de functie bovenaan kopiëren naar ons css-bestand.
index.html
index.css
Bedankt voor je feedback!
