CSS- overgangen
CSS-overgangen
Met CSS-overgangen kunt u eigenschapswaarden soepel wijzigen, gedurende een bepaalde duur.
Beweeg de muis over het onderstaande element om een CSS-overgangseffect te zien:
In dit hoofdstuk leert u over de volgende eigenschappen:
transitiontransition-delaytransition-durationtransition-propertytransition-timing-function
Browserondersteuning voor overgangen
De getallen in de tabel geven de eerste browserversie aan die de eigenschap volledig ondersteunt.
| Property | |||||
|---|---|---|---|---|---|
| transition | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
| transition-delay | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
| transition-duration | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
| transition-property | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
| transition-timing-function | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
Hoe CSS-overgangen te gebruiken?
Om een overgangseffect te creëren, moet u twee dingen specificeren:
- de CSS-eigenschap waaraan u een effect wilt toevoegen
- de duur van het effect
Opmerking: Als het duurgedeelte niet is opgegeven, heeft de overgang geen effect, omdat de standaardwaarde 0 is.
Het volgende voorbeeld toont een 100px * 100px rood <div>-element. Het element <div> heeft ook een overgangseffect gespecificeerd voor de eigenschap width, met een duur van 2 seconden:
Voorbeeld
div
{
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
Het overgangseffect begint wanneer de opgegeven CSS-eigenschap (breedte) van waarde verandert.
Laten we nu een nieuwe waarde opgeven voor de eigenschap width wanneer een gebruiker met de muis over het element <div> gaat:
Voorbeeld
div:hover
{
width: 300px;
}
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:
Voorbeeld
div
{
transition: width 2s, height 4s;
}
Specificeer de snelheidscurve van de overgang
De transition-timing-functioneigenschap specificeert de snelheidscurve van het overgangseffect.
De eigenschap transition-timing-functie 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 eindease-in- specificeert een overgangseffect met een langzame startease-out- specificeert een overgangseffect met een langzaam eindeease-in-out- specificeert een overgangseffect met een langzame start en eindecubic-bezier(n,n,n,n)- hiermee kunt u uw eigen waarden definiëren in een kubieke-bezier-functie
Het volgende voorbeeld toont enkele van de verschillende snelheidscurven die kunnen worden gebruikt:
Voorbeeld
#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-delayeigenschap specificeert een vertraging (in seconden) voor het overgangseffect.
Het volgende voorbeeld heeft een vertraging van 1 seconde voordat wordt gestart:
Voorbeeld
div {
transition-delay: 1s;
}
Overgang + Transformatie
Het volgende voorbeeld voegt een overgangseffect toe aan de transformatie:
Voorbeeld
div {
transition:
width 2s, height 2s, transform 2s;
}
Meer overgangsvoorbeelden
De CSS-overgangseigenschappen kunnen één voor één worden gespecificeerd, zoals deze:
Voorbeeld
div
{
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
of door de steno-eigenschap te gebruiken transition:
Voorbeeld
div
{
transition: width 2s linear 1s;
}
CSS-overgangseigenschappen
De volgende tabel bevat alle CSS-overgangseigenschappen:
| Property | Description |
|---|---|
| transition | A shorthand property for setting the four transition properties into a single property |
| transition-delay | Specifies a delay (in seconds) for the transition effect |
| transition-duration | Specifies how many seconds or milliseconds a transition effect takes to complete |
| transition-property | Specifies the name of the CSS property the transition effect is for |
| transition-timing-function | Specifies the speed curve of the transition effect |