Overgangsejendom - CSS-tricks

Anonim

Den transition-propertyegenskab, der normalt anvendes som led i transitionstenografi, der bruges til at definere, hvad ejendom, eller ejendomme, du ønsker at anvende en overgang effekt til.

Dette gøres ved at angive navnet på ejendommen som værdien:

.example ( transition-property: color; )

Værdien kan være en af ​​følgende:

  • Et enkelt ejendomsnavn som i eksemplet ovenfor
  • En kommasepareret liste over ejendomsnavne (stenografi eller langhånd) til overgang af flere egenskaber på et enkelt element
  • Nøgleordet none, som indikerer, at ingen ejendom overgår
  • Nøgleordet all, der angiver, at alle egenskaber vil overgå (standard)

Når komma adskiller de værdier, bliver de egenskabsnavne væsentlige knyttet til de andre over- egenskaber definerede ( transition-timing-function, transition-duration, og transition-delay). Så dette betyder, at hvis en komma-adskilt liste over egenskaber inkluderer et eller flere ejendomsnavne, der er ugyldige, vil de andre egenskaber stadig overgå og kortlægges til deres tilsigtede relaterede overgangsegenskaber.

Specifikationen beskriver dette ved at sige:

“(U) ikke-genkendte eller ikke-animerbare egenskaber skal holdes på listen for at bevare matchningen af ​​indekser.”

Når du bruger en værdi af noneeller de universelle nøgleord inheriteller initial, kan disse værdier ikke bruges som en del af en kommasepareret liste, ellers vil dette resultere i en syntaksfejl, og hele linjen ignoreres.

For kompatibilitet i alle understøttende browsere kræves leverandørpræfikser med standardsyntaxen erklæret sidst:

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

IE10 (den første stabile version af IE, der understøtter transition-property) kræver ikke -ms-præfikset.

Browsersupport

Chrome Safari Firefox Opera IE Android iOS
Arbejder Arbejder 4+ 10.5+ 10+ 2.1+ 3.2+