CSS Basis
Selectors
Geavanceerd
CSS Basis
Selectors
Geavanceerd

CSS Overgangen

Met CSS overgangen ook wel genoemd transitions kun je CSS eigenschapswaarden soepel wijzigen, gedurende een bepaalde duur.

CSS overgangen / transitions

Normaal gesproken wanneer de waarde van een CSS eigenschap verandert, wordt het weergegeven resultaat onmiddellijk bijgewerkt. Een veel voorkomend voorbeeld is het wijzigen van de achtergrondkleur van een knop (button) bij een mousehover. In een normaal scenario is de achtergrondkleur van de knop onmiddellijk gewijzigd van de oude eigenschapswaarde in de nieuwe eigenschapswaarde wanneer je de cursor over de knop beweegt.

Beweeg de muis over het onderstaande knop om een ​​CSS-overgangseffect te zien:

Browser ondersteuning

De getallen in de tabel geven de browserversie aan die de eigenschap volledig ondersteunt. Hou de muis op de afbeelding in het tabel om de versie nummer van de browsers te weergeven.

Eigenschap
transition Ja Ja Ja Ja Ja
transition-delay Ja Ja Ja Ja Ja
transition-duration Ja Ja Ja Ja Ja
transition-property Ja Ja Ja Ja Ja
transition-timing-function Ja Ja Ja Ja Ja

CSS transition eigenschap

In dit hoofdstuk leer je de volgende eigenschappen te gebruiken:

transition
transition-delay
transition-duration
transition-property
transition-timing-function

Hoe CSS-overgangen te gebruiken?

Om de overgang te laten uitvoeren, moet je ten minste twee dingen opgeven, de naam van de CSS eigenschap waarop je het overgangseffect wilt toepassen en de duur van het overgangseffect. Alle andere overgangs-eigenschappen zijn echter optioneel.

de CSS eigenschap waaraan je een effect wilt toevoegen
de duur van het effect

Tip Als het duurgedeelte niet is opgegeven, heeft de overgang geen effect, omdat de standaardwaarde 0 is.

Het volgende voorbeeld toont een <div> element met een rode vierkant van 100 x 100 pixels. In het element <div> hebben we een overgangseffect opgegeven voor de eigenschap width, met een duur van 2 seconden.

VoorbeeldVoorbeeld: 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

Het overgangseffect begint wanneer de opgegeven CSS eigenschap width van waarde verandert. We gaan nu een nieuwe waarde opgeven voor de eigenschap width wanneer de gebruiker met de muis over het element <div> beweegt. Dit zorgt ervoor dat de breedte met 300 pixels toeneemt.

VoorbeeldVoorbeeld: 
div:hover {
  width: 300px;
}

Tip Merk op dat wanneer de cursor uit het element beweegt, deze geleidelijk terug zal veranderen naar zijn oorspronkelijke stijl.

Verschillende eigenschapswaarden wijzigen

In het volgende voorbeeld wordt een overgangseffect toegevoegd voor zowel de eigenschap width als height, met een duur van 2 seconden voor de breedte en 4 seconden voor de hoogte.

VoorbeeldVoorbeeld: 
div {
  transition: width 2s, height 4s;
}

Specificeer de snelheidscurve van de overgang

De transition-timing-function eigenschap specificeert de snelheidscurve van het overgangseffect.

De eigenschap transition-timing-function kan de volgende waarden hebben:

ease - Specificeert een overgangseffect met een langzame start, dan snel en dan langzaam eindigen (dit is standaard).
linear - Specificeert een overgangseffect met dezelfde snelheid van begin tot eind.
ease-in - Specificeert een overgangseffect met een langzame start.
ease-out - Specificeert een overgangseffect met een langzaam einde.
ease-in-out - Specificeert een overgangseffect met een langzame start en einde.
cubic-bezier(n,n,n,n) - Hiermee kun je je eigen waarden definiëren.

Het volgende voorbeeld toont enkele van de verschillende snelheidscurven die gebruikt kunnen worden:

VoorbeeldVoorbeeld: 
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

Het overgangseffect vertragen

De transition-delay eigenschap specificeert een vertraging (in seconden) voor het overgangseffect. Het volgende voorbeeld heeft een vertraging van 1 seconde voordat wordt gestart.

VoorbeeldVoorbeeld: 
div {
  transition-delay: 1s;
}

Overgang + Transformatie

Het volgende voorbeeld voegt een overgangseffect toe aan de transformatie:

VoorbeeldVoorbeeld: 
div {
  transition: width 2s, height 2s, transform 2s;
}

Meer overgangsvoorbeelden

De CSS overgang-seigenschappen kunnen één voor één worden opgegeven, zoals deze:

VoorbeeldVoorbeeld: 
div {
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

Je kunt ook de shorthand gebruiken om alles in één regel op te nemen met de transition eigenschap:

VoorbeeldVoorbeeld: 
div {
  transition: width 2s linear 1s;
}

CSS overgangs eigenschappen

De volgende tabel bevat alle CSS overgangs-eigenschappen:

Eigenschap Beschrijving
transition Een verkorte eigenschap om de vier overgangs eigenschappen in één regel op te nemen.
transition-delay Geeft een vertraging (in seconden) voor het overgangseffect aan.
transition-duration Geeft aan hoeveel seconden of milliseconden een overgangseffect nodig heeft om te voltooien.
transition-property Geeft de naam van de CSS eigenschap waarvoor het overgangseffect is bedoeld aan.
transition-timing-function Geeft de snelheidscurve van het overgangseffect aan.
Ad blocker gedetecteerd!
  Ons website heeft gedetecteerd dat u een Ad blocker gebruikt. Codecenter.nl is gratis, wij blijven overeind door het weergeven van advertenties en u kunt ons daarbij helpen. Het wordt aanbevolen om uw Ad blocker uit te schakelen zodat u verder gebruik kunt maken van codecenter.nl, alvast bedankt.