Style transition eigenschap

definitie en gebruik

transition De eigenschap is een verkorte eigenschap van de vier overgangseigenschappen:

opmerking:Bepaal altijd transitionDuration eigenschapanders is de duur 0, het overgangseffect is ongeldig.

Zie ook:

CSS referentiemanualtransition eigenschap

voorbeeld

Houd de muis boven het div-element om het uiterlijk geleidelijk te veranderen:

document.getElementById("myDIV").style.transition = "all 2s";

Probeer het zelf uit

syntaxis

Geef de transition eigenschap terug:

object.style.transition

Stel de transition eigenschap in:

object.style.transition = "eigenschap duur Timing-functie vertraging|initial|inherit"

eigenschapswaarde

waarde beschrijving
transitionProperty bepaalt de naam van de CSS-eigenschap waarop het overgangseffect van toepassing is.
transitionDuration bepaalt hoeveel seconden of milliseconden het overgangseffect duurt.
transitionTimingFunction bepaalt de snelheidskromming van het overgangseffect.
transitionDelay definieert wanneer de overgangseffecten beginnen.
initial stel deze eigenschap in op zijn standaardwaarde. Raadpleeg initial.
inherit erft deze eigenschap van de ouderlijke element. Raadpleeg inherit.

technische details

standaardwaarde: all 0 ease 0
terugkeerwaarde: tekenreeks, die de transition eigenschap.
CSS versie: CSS3

browserondersteuning

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
26.0 10.0 16.0 6.1 12.1