CSS transition eigenschap

Definitie en gebruik

De transition-eigenschap is een verkorte eigenschap die wordt gebruikt om vier overgangseigenschappen in te stellen:

Opmerking:Stel altijd in transition-duration Als de eigenschap niet is ingesteld, zal er geen overgangseffect optreden, tenzij de tijd 0 is.

Zie ook:

CSS Handleiding:CSS overgang

HTML DOM Referentiemanual:transition eigenschap

Voorbeeld

Plaats de muispunt op het div-element, de breedte verandert geleidelijk van 100px naar 300px:

div {
  width: 100px;
  transition: width 2s;
}

Probeer het zelf

CSS Syntax

transition: eigenschap duur Timing-functie vertraging;

Eigenschapswaarde

Waarde Beschrijving
transition-property Bepaalt de naam van de CSS-eigenschap die het overgangseffect instelt.
transition-duration Bepaalt hoeveel seconden of milliseconden nodig zijn om het overgangseffect af te ronden.
transition-timing-function Stelt de snelheid van het effect van de snelheid in.
transition-delay Definieert wanneer de overgangseffecten beginnen.

Technische details

Standaardwaarde: all 0 gemakkelijk 0
Inheritantie: nee
Versie: CSS3
JavaScript Syntax: object.style.transition="width 2s"

Browserondersteuning

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

Getallen met -webkit-、-moz- of -o- voorafgaand betekenen de eerste versie van het gebruik van de prefix.

Chrome IE / Edge Firefox Safari Opera
26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-