De transition-propertyeigenschap, normaal gesproken gebruikt als onderdeel van een transitionsteno, wordt gebruikt om te definiëren op welke eigenschap of eigenschappen u een overgangseffect wilt toepassen.
Dit wordt gedaan door de naam van de eigenschap als waarde op te geven:
.example ( transition-property: color; )De waarde kan een van de volgende zijn:
- Een enkele eigenschapnaam, zoals in het bovenstaande voorbeeld
- Een door komma's gescheiden lijst met eigenschapsnamen (steno of met de hand), voor het overzetten van meerdere eigenschappen op een enkel element
- Het trefwoord
none, dat aangeeft dat geen enkele eigenschap wordt overgezet - Het trefwoord
all, dat aangeeft dat alle eigenschappen worden overgezet (standaard)
Als komma scheiden van de waarden, worden de eigenschapsnamen hoofdzaak toegewezen aan de andere Overgangseigenschappen gedefinieerd ( transition-timing-function, transition-durationen transition-delay). Dit betekent dus dat als een door komma's gescheiden lijst met eigenschappen een of meer eigenschapsnamen bevat die ongeldig zijn, de andere eigenschappen nog steeds worden overgezet en worden toegewezen aan hun bedoelde gerelateerde overgangseigenschappen.
De specificatie beschrijft dit door te zeggen:
"(U) n-herkende of niet-animeerbare eigenschappen moeten in de lijst worden bewaard om de matching van indices te behouden."
Als u een waarde van noneof de universele sleutelwoorden inheritof gebruikt initial, kunnen deze waarden niet worden gebruikt als onderdeel van een door komma's gescheiden lijst, anders zal dit resulteren in een syntaxisfout en wordt de hele regel genegeerd.
Voor compatibiliteit in alle ondersteunende browsers zijn leveranciersvoorvoegsels vereist, waarbij de standaardsyntaxis als laatste wordt verklaard:
.example ( -webkit-transition-property: color; -moz-transition-property: color; -o-transition-property: color; transition-property: color; )IE10 (de eerste stabiele versie van IE die wordt ondersteund transition-property) vereist geen -ms-prefix.
Browser-ondersteuning
| Chrome | Safari | Firefox | Opera | D.W.Z | Android | iOS |
|---|---|---|---|---|---|---|
| Werken | Werken | 4+ | 10.5+ | 10+ | 2.1+ | 3.2+ |