CSS transities

CSS transities

CSS-overgangen laten u de waarde van een eigenschap geleidelijk veranderen binnen een bepaalde tijd.

Plaats de muis op dit element om het CSS-overgangseffect te bekijken:

CSS

In dit hoofdstuk zult u leren over de volgende eigenschappen:

  • overgang
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function

Browserondersteuning voor overgangen

De cijfers in de tabel vermelden de eerste browserversie die de eigenschap volledig ondersteunt.

eigenschappen Chrome IE Firefox Safari Opera
overgang 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 gebruikt u CSS-overgangen?

Om een overgangseffect te creëren, moet u twee dingen duidelijk specificeren:

  • De CSS-eigenschap waaraan u het effect wilt toevoegen
  • Duur van het effect

Let op:Als de duur van het gedeelte niet wordt vastgesteld, heeft de overgang geen effect, omdat de standaardwaarde 0 is.

Het volgende voorbeeld toont een rode <div>-element van 100px * 100px. Het <div>-element heeft ook een overgangseffect voor de width-eigenschap, met een duur van 2 seconden:

voorbeeld

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

Wanneer de waarde van het gespecificeerde CSS-eigenschap (width) verandert, begint de overgangseffect.

Laat ons nu een nieuwe waarde voor de width-eigenschap specificeren wanneer de muis over het <div>-element wordt gehouden:

voorbeeld

div:hover {
  width: 300px;
{}

Probeer het zelf

Let op, wanneer de cursor van het element verplaatst wordt, zal deze geleidelijk terugkeren naar zijn oorspronkelijke stijl.

Wijzig meerdere eigenschapswaarden

Het volgende voorbeeld voegt een overgangseffect toe aan zowel de breedte als de hoogte-eigenschappen, breedte is 2 seconden, hoogte is 4 seconden:

voorbeeld

div {
  transition: breedte 2s, hoogte 4s;
{}

Probeer het zelf

Specificeer de snelheidskromme van het overgangseffect

transition-timing-function De eigenschap bepaalt de snelheidskromme van het overgangseffect.

De eigenschap transition-tijdsfunctie accepteert de volgende waarden:

  • ease - Bepaalt een overgangseffect dat eerst langzaam begint, vervolgens versnelt en uiteindelijk langzaam eindigt (standaard)
  • lineair - Bepaalt een overgangseffect dat dezelfde snelheid heeft van begin tot einde
  • ease-in - Bepaalt een overgangseffect dat langzaam begint
  • ease-out - Bepaalt een overgangseffect dat langzaam eindigt
  • ease-in-out - Bepaalt een overgangseffect dat langzaam begint en eindigt
  • cubic-bezier(n,n,n,n) - Laat u toe om uw eigen waarden te definiëren in een drievoudige Bezier-functie

Het volgende voorbeeld toont enkele van de verschillende snelheidskrommen die u kunt gebruiken:

voorbeeld

#div1 {transition-tijdsfunctie: lineair;}
#div2 {transition-tijdsfunctie: gemakkelijk;}
#div3 {transition-tijdsfunctie: gemakkelijk-ingaan;}
#div4 {transition-tijdsfunctie: gemakkelijk-uitgaan;}
#div5 {transition-tijdsfunctie: gemakkelijk-ingaan-uitgaan;}

Probeer het zelf

Vertraag het overgangseffect

transition-delay De eigenschap bepaalt de vertraging van het overgangseffect (in seconden).

Het volgende voorbeeld heeft een vertraging van 1 seconde voordat het start:

voorbeeld

div {
  transition-vertraging: 1s;
{}

Probeer het zelf

Overgang + Transformatie

Het volgende voorbeeld voegt een overgangseffect toe aan de transformatie:

voorbeeld

div {
  transition: breedte 2s, hoogte 2s, transformatie 2s;
{}

Probeer het zelf

Meer overgangsvoorbeelden

U kunt de CSS-overgangseigenschappen een voor een specificeren, zoals hieronder:

voorbeeld

div {
  transition-eigenschap: breedte;
  transition-duur: 2s;
  transition-tijdsfunctie: lineair;
  transition-vertraging: 1s;
{}

Probeer het zelf

of gebruik de verkorte versie overgang eigenschappen:

voorbeeld

div {
  transition: breedte 2s lineair 1s;
{}

Probeer het zelf

CSS-overgangseigenschappen

De tabel hieronder lijst alle CSS-overgangseigenschappen op:

eigenschappen beschrijving
overgang Korte eigenschap die vier overgangseigenschappen als één eigenschap instelt.
transition-delay Definieert de vertraging van het overgangseffect (in seconden).
transition-duration Definieert hoe lang de overgangseffecten moeten duren, in seconden of milliseconden.
transition-property Definieert de naam van het CSS-eigenschap dat het overgangseffect aangaat.
transition-timing-function Definieert de snelheidskromme van de overgangseffecten.