Tranzitie-proprietate - CSS-Tricks

Anonim

transition-propertyProprietatea, utilizată în mod normal , ca parte a transitionstenografie, este folosit pentru a defini ce proprietăți sau proprietăți, doriți să aplicați un efect de tranziție la.

Acest lucru se face furnizând numele proprietății ca valoare:

.example ( transition-property: color; )

Valoarea poate fi una dintre următoarele:

  • Un singur nume de proprietate, ca în exemplul de mai sus
  • O listă separată prin virgule a numelor de proprietăți (stenogramă sau lung), pentru tranziția mai multor proprietăți pe un singur element
  • Cuvântul cheie none, care indică faptul că nicio proprietate nu va trece
  • Cuvântul cheie all, care indică faptul că toate proprietățile vor face tranziția (implicit)

Când virgulă separarea valorilor, numele de proprietate sunt , în esență , mapate la celelalte proprietăți de tranziție definite ( transition-timing-function, transition-durationși transition-delay). Deci, acest lucru înseamnă că, dacă o listă de proprietăți separate prin virgulă include unul sau mai multe nume de proprietăți care sunt nevalide, celelalte proprietăți vor trece în continuare și vor fi mapate la proprietățile lor de tranziție.

Specificația descrie acest lucru spunând:

„(U) proprietățile nerecunoscute sau non-animabile trebuie păstrate în listă pentru a păstra potrivirea indicilor.”

Atunci când utilizați o valoare nonesau cuvintele cheie universale inheritsau initial, aceste valori nu pot fi utilizate ca parte a unei liste separate prin virgulă, altfel aceasta va duce la o eroare de sintaxă și întreaga linie va fi ignorată.

Pentru compatibilitate în toate browserele compatibile, sunt necesare prefixele furnizorului, cu sintaxa standard declarată ultima:

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

IE10 (prima versiune stabilă de IE care acceptă transition-property) nu necesită -ms-prefixul.

Suport pentru browser

Crom Safari Firefox Operă IE Android iOS
Lucrări Lucrări 4+ 10.5+ Peste 10 ani 2.1+ 3.2+