CSS transition egenskab

Definition og brug

transition egenskab er en kortfattet egenskab, der bruges til at sætte fire overgangsegenskaber:

Bemærkninger:Sæt altid transition-duration Hvis egenskaben ikke er angivet, og varigheden er 0, vil der ikke opstå nogen overgangseffekt.

Se også:

CSS Tutorial:CSS overgange

HTML DOM Reference Manual:transition egenskab

Eksempel

Placer musepegeren på div-elementet, så bredden vil gradvist ændre sig fra 100px til 300px:

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

Prøv det selv

CSS Syntax

transition: property duration timing-function delay;

Egenskabsværdi

Værdi Beskrivelse
transition-property Angiver navnet på de CSS-ejenskaber, der skal have overgangen.
transition-duration Angiver hvor mange sekunder eller millisekunder det tager at fuldføre overgangen.
transition-timing-function Angiver hastighedskurven for effekten.
transition-delay Definerer hvornår overgangen begynder.

Tekniske detaljer

Standardværdi: all 0 ease 0
Arv: no
Version: CSS3
JavaScript Syntax: object.style.transition="width 2s"

Browserunderstøttelse

Tal i tabellen angiver den første browserversion, der fuldt ud understøtter egenskaben.

Tal med -webkit-、-moz- eller -o- præfiks indikerer den første version, der bruger præfikset.

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-