Övergångsfastighet - CSS-tricks

Anonim

Den transition-propertyegenskapen, som normalt används som en del av transitionstenografi, används för att definiera vilken egendom eller egenskaper du vill använda en övergångseffekt till.

Detta görs genom att ange fastighetens namn som värdet:

.example ( transition-property: color; )

Värdet kan vara något av följande:

  • Ett enda fastighetsnamn, som i exemplet ovan
  • En kommaseparerad lista med fastighetsnamn (stenografi eller långhand) för att överföra flera egenskaper på ett enda element
  • Nyckelordet none, vilket indikerar att ingen egendom kommer att övergå
  • Nyckelordet all, som indikerar att alla fastigheter kommer att övergå (standard)

När kommatecken som separerar de värden, är egenskapsnamnen väsentligen avbildas till de andra övergångsegenskaper definierade ( transition-timing-function, transition-duration, och transition-delay). Så detta betyder att om en kommaseparerad lista med egenskaper innehåller ett eller flera egendomsnamn som är ogiltiga, kommer de andra egenskaperna fortfarande att övergå och kommer att mappas till deras avsedda relaterade övergångsegenskaper.

Specifikationen beskriver detta genom att säga:

"(U) icke-kända eller icke-animerbara egenskaper måste hållas i listan för att bevara matchningen av index."

När du använder ett värde på noneeller de universella nyckelorden inheriteller initial, kan dessa värden inte användas som en del av en kommaseparerad lista, annars leder detta till ett syntaxfel och hela raden ignoreras.

För kompatibilitet i alla stödjande webbläsare krävs leverantörsprefix, med standardsyntax deklarerad som sist:

.example ( -webkit-transition-property: color; -moz-transition-property: color; -o-transition-property: color; transition-property: color; )

IE10 (den första stabila versionen av IE som stöds transition-property) kräver inte -ms-prefixet.

Webbläsarstöd

Krom Safari Firefox Opera IE Android iOS
Arbetar Arbetar 4+ 10,5+ 10+ 2.1+ 3.2+