Style transition-egenskap

Definition och användning

transition Egenskapen är en förkortning av de fyra övergångsegenskaperna:

Kommentar:Bestäm alltid transitionDuration-egenskapannars är varaktigheten 0, övergången är ogiltig.

Se också:

CSS-referenshandbok:transition-egenskap

Exempel

Håll muspekaren över div-elementet för att gradvis ändra dess utseende:

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

Prova själv

Syntaks

Returnera transition-egenskap:

object.style.transition

Ställ in transition-egenskap:

object.style.transition = "property duration timing-function delay|initial|inherit"

Egenskapsvärde

Värde Beskrivning
transitionProperty Bestämmer namnet på den CSS-egenskap som övergången riktar sig mot.
transitionDuration Bestämmer hur många sekunder eller millisekunder övergången behöver för att slutföras.
transitionTimingFunction Bestämmer kurvan för övergångens hastighet.
transitionDelay Definierar när övergången ska börja.
initial Sätt detta egenskap till dess standardvärde. Se initial.
inherit Inherriterar detta egenskap från föräldrelementet. Se inherit.

Tekniska detaljer

Standardvärde: all 0 ease 0
Returvärde: sträng, som anger elementets transition-egenskap.
CSS-version: CSS3

Webbläsarstöd

Numreringen i tabellen anger den första webbläsarversionen som helt stöder detta egenskap.

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