CSS transition-property eigenschap

Definitie en gebruik

De transition-property-eigenschap bepaalt de naam van de CSS-eigenschappen die de overgangseffecten moeten toepassen. (De overgangseffecten beginnen wanneer de opgegeven CSS-eigenschappen veranderen).

Tip:Overgangseffecten vinden meestal plaats wanneer de gebruiker de muispijler over het element laat zweven.

Opmerking:Stel altijd in transition-duration Eigenschappen, anders wordt er geen overgangseffect weergegeven als de tijd 0 is.

Zie ook:

CSS tutorial:CSS overgang

HTML DOM referentiemanual:transitionProperty eigenschap

Voorbeeld

Plaats de muispijler op het div-element, dan wordt een overgangseffect met een soepele verandering van de breedte van het element weergegeven:

div {
  transition-property: width;
}

Probeer het zelf

CSS syntax

transition-property: none|all|property;

Eigenschapswaarde

Waarde Beschrijving
none Geen eigenschappen krijgen de overgangseffecten.
all Alle eigenschappen krijgen de overgangseffecten.
property Definieert een lijst van CSS-eigenschappen die de overgangseffecten moeten toepassen, gescheiden door komma's.

Technische details

Standaardwaarde: all
Inheritance: nee
Versie: CSS3
JavaScript syntax: object.style.transitionProperty="width,height"

Browserondersteuning

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

Getallen met -webkit-, -moz- of -o- als voorvoegsel vertegenwoordigen de eerste versie die het voorvoegsel gebruikt.

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-