Proprietà di transizione - Trucchi CSS

Anonim

La transition-propertyproprietà, normalmente utilizzata come parte della transitionscorciatoia, viene utilizzata per definire a quale proprietà, o proprietà, applicare un effetto di transizione.

Questo viene fatto fornendo il nome della proprietà come valore:

.example ( transition-property: color; )

Il valore può essere uno dei seguenti:

  • Un unico nome di proprietà, come nell'esempio sopra
  • Un elenco separato da virgole di nomi di proprietà (abbreviato o esteso), per la transizione di più proprietà su un singolo elemento
  • La parola chiave none, che indica che nessuna proprietà verrà trasferita
  • La parola chiave all, che indica la transizione di tutte le proprietà (impostazione predefinita)

Quando virgola che separa i valori, i nomi delle proprietà sono essenzialmente mappati sulle altre proprietà di transizione definiti ( transition-timing-function, transition-duratione transition-delay). Quindi questo significa che se un elenco di proprietà separato da virgole include uno o più nomi di proprietà non validi, le altre proprietà continueranno a transitare e verranno mappate alle proprietà di transizione correlate previste.

Le specifiche lo descrivono dicendo:

"(U) le proprietà non riconosciute o non animabili devono essere mantenute nell'elenco per preservare la corrispondenza degli indici."

Quando si utilizza un valore di noneo le parole chiave universali inherito initial, questi valori non possono essere utilizzati come parte di un elenco separato da virgole, altrimenti si verificherà un errore di sintassi e l'intera riga verrà ignorata.

Per la compatibilità con tutti i browser supportati, sono richiesti i prefissi del fornitore, con la sintassi standard dichiarata per ultima:

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

IE10 (la prima versione stabile di IE da supportare transition-property) non richiede il -ms-prefisso.

Supporto browser

Cromo Safari Firefox musica lirica IE Android iOS
Lavori Lavori 4+ 10.5+ 10+ 2.1+ 3.2+