web2 logo

Overgangen (transitions)

Overgangen (transitions) veranderen een element als je er bijvoorbeeld met de muis overheen gaat, als je er op klikt, enzovoorts.
Aanvankelijk waren er in CSS alleen directe overgangen, bijvoorbeeld de kleur veranderd meteen als je ergens op klikt. Tegenwoordig zijn er ook geleidelijke overgangen mogelijk. Daarbij kan je een element in stappen laten veranderen.
Voor geleidelijke overgangen zijn er een aantal eigenschappen beschikbaar die ingesteld kunnen worden:
transition-property: De eigenschap die moet overgaan, bijvoorbeeld de achtergrondkleur.
transition-duration: De duur van de overgang (s = in seconden).
transition-timing-function: De variatie van de snelheid waarmee de overgang moet plaatsvinden.
De transition eigenschappen worden toegevoegd aan de stijl van het element, dus niet aan die van een pseudo-element zoals :hover of :active.
Voorbeeld:
a.voorbeeld {
   padding: 5px 10px;
   background: #9c3;
   transition-property: background;
   transition-duration: 0.3s;
   transition-timing-function: ease;
}
a.voorbeeld:hover {
   background: #690;
}
Via de transition-timing-function kan de snelheid van de overgang gevarieerd worden tijdens de duur van de overgang. De transition-timing-function kan de volgende waarden hebben:
ease, linear, ease-in, ease-out, ease-in-out en cubic-bezier.
Als de duur van de overgang kort is, dan zul je weinig verschil zien tussen de waarden van de transition-timing-function, het maakt dan eigenlijk niet uit welke je gebruikt. De defaultwaarde is ease, maar ook linear zal in de meeste gevallen bij kortere tijdsduren prima volstaan.
Er is nog een transition eigenschap beschikbaar voor als je de overgang niet meteen wilt laten plaatsvinden,maar even wilt uitstellen en dat is transition-delay
Voorbeeld:
transition-delay: 0.5s;
Er is ook een kortere schrijfwijze beschikbaar voor overgangen zonder uitstel:
transition: background 0.3s ease;
En er is een korte schrijfwijze voor overgangen met uitstel:
transition: background 0.3s ease 0.5s;
De uitstel duur wordt dan gewoon achteraan toegevoegd.
Deze korte schrijfwijzen kunnen ook worden gebruikt om meerdere elementen op verschillende manieren te laten overgaan door deze te scheiden met een komma.
Voorbeeld:
transition: background .3s ease, color 0.5s linear;
Als alle eigenschappen dezelfde overgang moeten krijgen hoeven ze niet allemaal afzonderlijk opgenoemd te worden, maar dan kan all gebruikt worden.
Voorbeeld:
transition: all 0.3s ease;

Toegevoegd door: Kees de Keijzer
Twitter: @kdkq

~ css ~

~ Onderwerpen ~

Dit is een website zonder pop-ups

~ Links ~

Design & Development by Cyberwebdesign.nl for web2.nl © 2020.