Samenvatting
Overgangen zorgen ervoor dat veranderingen op je website vloeiend verlopen in plaats van plotseling. Denk aan een knop die langzaam van kleur verandert als iemand er met de muis overheen gaat, in plaats van dat de kleur in één keer omschakelt. Met overgangen maak je dit soort animaties, en je kunt precies instellen hoe snel en soepel ze verlopen.
Hoe werkt het
Een overgang instellen
- Selecteer het element in de editor
- Ga naar de tab Overgangen in het rechter paneel
- Klik op + om een nieuwe overgang toe te voegen
- Kies welke eigenschap je wilt animeren, hoe lang de animatie duurt en hoe het verloop eruitziet
Wat kun je per overgang instellen?
| Instelling | Wat doet het? |
|---|---|
| Property | Welke eigenschap er geanimeerd wordt, bijvoorbeeld de achtergrondkleur, schaduw of schaal |
| Duur | Hoe lang de animatie duurt (in seconden of milliseconden). 0,3 seconde is een goed startpunt |
| Timing | Hoe het verloop van de animatie eruitziet — begint het langzaam of juist snel? |
| Vertraging | Hoeveel tijd er gewacht wordt voordat de animatie begint |
Timing-opties uitgelegd
| Timing | Wat doet het? |
|---|---|
| Vloeiend | Begint langzaam, versnelt in het midden, en eindigt langzaam. Dit voelt het meest natuurlijk — het is de optie die je het vaakst zult gebruiken |
| Vloeiend-in | Begint langzaam en versnelt naar het einde |
| Vloeiend-uit | Begint snel en vertraagt naar het einde |
| Vloeiend-in-uit | Begint langzaam én eindigt langzaam |
| Lineair | Constante snelheid van begin tot eind — geen versnelling of vertraging |
Welke eigenschappen kun je animeren?
Er zijn 24 eigenschappen die je kunt animeren. Hier zijn de belangrijkste:
| Eigenschap | Wat doet het? |
|---|---|
| background-color | De achtergrondkleur verandert geleidelijk |
| color | De tekstkleur verandert geleidelijk |
| opacity | Het element wordt langzaam doorzichtiger of juist zichtbaarder |
| transform | Het element verschuift, draait of verandert van grootte |
| box-shadow | De schaduw verandert geleidelijk |
| border-color | De randkleur verandert geleidelijk |
| border-radius | De hoeken worden geleidelijk ronder of scherper |
| border-width | De randdikte verandert geleidelijk |
| filter | Visuele filters (vervaging, grijstinten, sepia) veranderen geleidelijk |
| font-size | De lettergrootte verandert geleidelijk |
| width / height | De breedte of hoogte verandert geleidelijk |
| margin / padding | De ruimtes veranderen geleidelijk |
En verder: font-weight, letter-spacing, line-height, max-height, max-width, fill (SVG), left, right, top, bottom.
Overgangen werken samen met staten
Een overgang heeft alleen zin als je ook een andere staat hebt ingesteld. Hoe werkt dat?
| Staat | Wanneer is het actief? |
|---|---|
| Standaard | De normale weergave van het element |
| Mouseover | Als een bezoeker met de muis over het element gaat |
| Focus | Als het element geselecteerd is via het toetsenbord |
Voorbeeld: Je wilt dat een knop iets doorzichtiger wordt bij hover.
- Ga naar Opmaak → Standaard en zet de ondoorzichtigheid op 100%
- Ga naar Opmaak → Mouseover en zet de ondoorzichtigheid op 80%
- Ga naar Overgangen en voeg een overgang toe op "opacity" met een duur van 0,3 seconde
- Het resultaat: de knop wordt geleidelijk iets doorzichtiger als iemand er met de muis overheen gaat
Niet elk element ondersteunt overgangen
De Overgangen-tab is niet bij elk elementtype beschikbaar. Koppen, alinea's en menu-elementen ondersteunen geen overgangen.
Scroll-effecten
Wil je dat een element animeert wanneer het in beeld scrollt? Dat stel je niet in via de Overgangen-tab, maar via de Instellingen-tab. Daar vind je opties als:
- Effect (welk type animatie)
- Effect start (op welk punt van het scherm het effect begint)
- Scrollsnelheid (voor parallax-effecten)
Tips
- Een duur van 0,2 tot 0,4 seconde voelt professioneel. Langer dan dat wordt al snel saai.
- Animeer niet álles — kies bewust welke elementen een overgang krijgen.
- Hover-effecten werken niet op touchscreens (telefoons en tablets). Zorg dat de standaardstaat er ook goed uitziet zonder hover.
Wanneer gebruik je dit
- Je wilt dat elementen vloeiend reageren op hover of focus
- Je zoekt een overzicht van alle eigenschappen die je kunt animeren
- Je wilt begrijpen hoe overgangen samenwerken met staten (standaard/mouseover/focus)
Veelgestelde vragen
Wat is het verschil tussen een overgang en een scroll-effect?
Een overgang reageert op interactie (hover, focus). Een scroll-effect speelt af wanneer een element in beeld scrollt. Overgangen stel je in via de Overgangen-tab, scroll-effecten via de Instellingen-tab.
Waarom zie ik de Overgangen-tab niet?
Niet elk elementtype ondersteunt overgangen. Bij koppen en alinea's is de tab niet beschikbaar.
Kan ik meerdere overgangen op één element instellen?
Ja, je kunt meerdere overgangen toevoegen. Elke overgang animeert een andere eigenschap. Via het ⋮-menu kun je alle overgangen in één keer resetten.