Duur en timing van transition-eigenschappen
Definieer welke eigenschappen transitionen, hoe lang dat duurt en wanneer ze met delay starten.
Duur en timing van transition-eigenschappen is een gratis CSS Academy-les op CoddyKit. Dit is les 1 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject CSS Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus CSS Academy bevat in totaal 4 lessen.
Wat is een CSS-overgang
Een CSS-overgang interpoleert tussen twee eigenschapswaarden gedurende een opgegeven tijdsduur wanneer de waarde verandert (bijvoorbeeld bij aanwijzen). Je hebt geen JavaScript nodig.
transition-property
Geeft aan welke CSS-eigenschappen moeten worden geanimeerd. Gebruik all om elke animeerbare eigenschap te laten overgaan, of vermeld specifieke eigenschappen.
<button>Save changes</button>transition-duration
Stelt in hoe lang de overgang duurt. Accepteert tijdwaarden in seconden (s) of milliseconden (ms).
<div class="card">Card</div>De verkorte schrijfwijze van transition
Combineert alle vier subeigenschappen van een overgang: property | duration | timing-function | delay.
<button class="btn">Submit</button>Meerdere overgangen
Vermeld meerdere overgangen, gescheiden door komma's, om verschillende eigenschappen onafhankelijk te animeren:
<div class="card">Card</div>transition-delay
Stelt het begin van de overgang uit. Handig om animaties na elkaar uit te voeren of de ene overgang te laten eindigen voordat de andere begint.
<nav>
<a class="nav-item" href="#">Home</a>
<a class="nav-item" href="#">About</a>
<a class="nav-item" href="#">Contact</a>
</nav>Overgang op de basistoestand
Plaats de eigenschap transition altijd op de basistoestand, niet op de :hover-toestand. Zo wordt de overgang zowel bij het activeren als bij het verlaten van :hover afgespeeld.
<button class="btn demo-active">Hover me</button>Wat kan worden overgegaan
De meeste numerieke CSS-eigenschappen kunnen een overgang krijgen: kleuren, afmetingen, dekking, transformaties enzovoort. Discrete eigenschappen (zoals display) kunnen niet vloeiend worden geïnterpoleerd — ze springen direct naar de nieuwe waarde.
Waarschuwing voor transition: all
Het gebruik van transition: all kan onverwachte animaties veroorzaken op eigenschappen die je niet wilt animeren. Geef in productiecode altijd expliciete eigenschappen op.
Kleuren laten overgaan
Kleurovergangen interpoleren tussen waarden. Gebruik voor de beste resultaten dezelfde kleurindeling:
<button class="btn demo-active">Hover me</button>Overgang en layoutproblemen
Vermijd voor betere prestaties overgangen van eigenschappen die de layout opnieuw berekenen, zoals width, height, margin en padding. Ze veroorzaken bij elk animatieframe een nieuwe layoutberekening. Gebruik in plaats daarvan transform en opacity.
Snelle controle
Waar moet de eigenschap transition worden geplaatst om ervoor te zorgen dat de overgang zowel bij het activeren als bij het verlaten van :hover wordt afgespeeld?
Samenvatting
CSS-overgangen maken wijzigingen van eigenschappen geleidelijk in de tijd met transition-property, duration, timing-function en delay. Plaats overgangen op de basistoestand voor animatie in beide richtingen. Geef voor betere prestaties en voorspelbaarheid de voorkeur aan specifieke lijsten met eigenschappen boven all.
Leer CSS met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 40
- Lessen
- 159
Veelgestelde vragen
Is de les “Duur en timing van transition-eigenschappen” gratis?
Ja — de volledige tekst van “Duur en timing van transition-eigenschappen” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus CSS Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus CSS Academy bevat in totaal 4 lessen.
Wat leer ik in “Duur en timing van transition-eigenschappen”?
Definieer welke eigenschappen transitionen, hoe lang dat duurt en wanneer ze met delay starten. Je oefent met CSS Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met CSS Academy te beginnen?
Ervaring vooraf is niet nodig. CSS Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.
Hoe lang duurt de les “Duur en timing van transition-eigenschappen”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over CSS Academy?
Ja. Elke les over CSS Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Duur en timing van transition-eigenschappen
- Easingfuncties: ease linear cubic-bezier
- Meerdere eigenschappen transitionen
- Prestaties: transformeerbare versus repaintende eigenschappen