CSS transition egenskap

Definition och användning

transition-attribut är en förenklad egenskap som används för att ställa in fyra övergångsegenskaper:

Kommentar:Ställ alltid in transition-duration Annars än om varaktigheten är 0, kommer det inte att uppstå någon övergångseffekt.

Se också:

CSS-lärplattform:CSS Transitioner

HTML DOM-referencehandbok:transition-attribut

Exempel

Placera muspekaren över div-elementet, så kommer dess bredd att gradvis förändras från 100px till 300px:

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

Prova själv

CSS-syntax

transition: property duration timing-function delay;

Egenskapsvärde

Värde Beskrivning
transition-property Bestämmer namnet på CSS-egenskapen som ställer in övergångseffekten.
transition-duration Bestämmer hur många sekunder eller millisekunder som krävs för att slutföra övergångseffekten.
transition-timing-function Bestämmer hastighetskurvan för effekten.
transition-delay Definierar när övergångseffekten börjar.

Tekniska detaljer

Standardvärde: all 0 ease 0
Arvbarhet: no
Version: CSS3
JavaScript-syntax: object.style.transition="width 2s"

Webbläsarstöd

Siffrorna i tabellen anger den första webbläsarversionen som fullständigt stöder egenskapen.

Siffror med -webkit-, -moz- eller -o- indikerar den första versionen som använder prefixet.

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-