Tranziție - CSS-Tricks | Almanah CSS 2025

transitionProprietatea este o proprietate prescurtare utilizată pentru a reprezenta până la patru proprietăți longhand legate de tranziție:

.example ( transition: (transition-property) (transition-duration) (transition-timing-function) (transition-delay); )

Aceste proprietăți de tranziție permit elementelor să schimbe valorile pe o durată specificată, animând modificările proprietății, mai degrabă decât să le facă să apară imediat. Iată un exemplu simplu care face tranziția culorii de fundal a unui element pe: hover:

div ( transition: background-color 0.5s ease; background-color: red; ) div:hover ( background-color: green; )

Diviziunea respectivă va dura o jumătate de secundă când mouse-ul este deasupra lui pentru a se transforma din roșu în verde. Iată o demonstrație live a unei astfel de tranziții:

Vedeți Demo de tranziție a stiloului de Louis Lazaris (@impressivewebs) pe CodePen.

Puteți specifica o anumită proprietate așa cum o avem mai sus sau puteți utiliza o valoare „toate” pentru a face referire la proprietățile de tranziție.

div ( transition: all 0.5s ease; background: red; padding: 10px; ) div:hover ( background: green; padding: 20px; )

În acest exemplu de mai sus, atât fundalul, cât și umplutura vor trece, datorită valorii „toate” specificate pentru transition-propertyporțiunea de stenogramă.

Puteți face virgulă seturi de valori separate pentru a efectua tranziții diferite pe proprietăți diferite:

div ( transition: background 0.2s ease, padding 0.8s linear; )

În cea mai mare parte, ordinea valorilor nu contează - decât dacă este specificată o întârziere. Dacă specificați o întârziere, trebuie mai întâi să specificați o durată. Prima valoare pe care browserul o recunoaște ca valoare de timp validă va reprezenta întotdeauna durata. Orice valoare validă ulterioară va fi analizată ca întârziere.

Unele proprietăți nu pot fi tranziționate, deoarece nu sunt proprietăți animabile. Consultați specificațiile pentru o listă completă a proprietăților care pot fi animate.

Prin specificarea tranziției pe elementul în sine, definiți tranziția care va avea loc în ambele direcții. Adică, atunci când stilurile sunt schimbate (de exemplu, la trecerea cu mouse-ul activat), proprietățile vor trece, iar când stilurile se schimbă înapoi (de exemplu, la trecerea la cursă) vor trece. De exemplu, următoarele demonstrații trec pe hover, dar nu pe hover off:

Vedeți Pen zohgt de Louis Lazaris (@impressivewebs) pe CodePen.

Acest lucru se întâmplă deoarece tranziția a fost mutată în :hoverselectorul de stare și nu există nicio tranziție de potrivire pe selector care să vizeze elementul direct fără :hoverstat.

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

.example ( -webkit-transition: background-color 500ms ease-out 1s; -moz-transition: background-color 500ms ease-out 1s; -o-transition: background-color 500ms ease-out 1s; transition: background-color 500ms ease-out 1s; )

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

Suport pentru browser

Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.