Vlastnost přechodu - Triky CSS

Anonim

transition-propertyVlastnost, běžně používané jako součást transitionzkratku, slouží k definování, jaký majetek, nebo vlastnosti, které chcete použít přechodový efekt.

To se provádí zadáním názvu vlastnosti jako hodnoty:

.example ( transition-property: color; )

Hodnota může být jedna z následujících:

  • Jeden název vlastnosti, jako v příkladu výše
  • Seznam názvů vlastností oddělených čárkami (zkratka nebo longhand) pro přechod více vlastností na jeden prvek
  • Klíčové slovo none, které označuje, že žádná vlastnost nebude převedena
  • Klíčové slovo all, které označuje přechod všech vlastností (výchozí)

Při čárka oddělování hodnot, názvy vlastností v podstatě mapovány do jiných přechodových vlastnosti definované ( transition-timing-function, transition-duration, a transition-delay). To znamená, že pokud seznam vlastností oddělených čárkami obsahuje jeden nebo více neplatných názvů vlastností, ostatní vlastnosti budou stále přecházet a budou mapovány na jejich zamýšlené související vlastnosti přechodu.

Specifikace to popisuje slovy:

„(U) nerozpoznané nebo neanimovatelné vlastnosti musí být v seznamu zachovány, aby se zachovala shoda indexů.“

Při použití hodnoty nonenebo univerzálních klíčových slov inheritnebo initialnelze tyto hodnoty použít jako součást seznamu odděleného čárkami, jinak to bude mít za následek syntaktickou chybu a celý řádek bude ignorován.

Pro kompatibilitu ve všech podporujících prohlížečích jsou vyžadovány předpony dodavatelů se standardní syntaxí deklarovanou jako poslední:

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

IE10 (první stabilní verze IE, která podporuje transition-property) nevyžaduje -ms-předponu.

Podpora prohlížeče

Chrome Safari Firefox Opera TJ Android iOS
Funguje Funguje 4+ 10,5+ 10+ 2.1+ 3,2+