Tranzițiile la CSS permit o tranziție lină de la o stare a unui element la altul. Funcționează astfel încât proprietățile individuale sunt animate de la starea inițială până la starea finală.
Puteți defini:
- tranziție-proprietate. ce proprietăți sunt animate;
- tranziție durată. cât durează animația;
- tranziție-sincronizare-funcție. modul în care se calculează statele intermediare;
- tranziție de întârziere. animația începe după un timp.
Puteți seta fiecare proprietate CSS individual sau utilizați versiunea abreviată: tranziție. În acest caz, numai durata de tranziție este obligatorie.
Rețineți că tranziția este un tip specific de conștientizare. unde există numai starea inițială și finală.
Exemplul rapid
Transitions sunt adesea folosite pentru o stare: hover.
În loc să aplicați imediat regulile CSS pentru hover, fundalul și culoarea textului se schimbă încet.
tranziție durată
durata de tranziție este singura proprietate de stil necesară pentru a crea o tranziție. Poate fi setat fie în secunde (2s), fie în milisecunde (100ms).
Dacă doriți să treceți la ultima jumătate de secundă. atunci puteți scrie 0,5s sau 500ms. În funcție de cât de repede doriți ca tranziția să dureze, poate fi mai ușor și / sau mai rapid să scrieți o unitate.
tranziție-proprietate
Doar o treime din proprietățile CSS pot fi animate. Site-ul Mozilla are o listă completă de proprietăți.
În mod prestabilit, proprietatea transition-property are valoarea totală. înseamnă pur și simplu că toate proprietățile posibile vor fi animate.
Puteți activa animarea numai a uneia sau mai multor proprietăți.
Proprietatea de frontieră este complet animată și vă permite să observați cu ușurință o tranziție lentă (2 secunde).
tranziție-sincronizare-funcție
Funcția de timp determină modul în care se calculează valoarea fiecărei proprietăți în timpul tranziției.
Implicit este usurinta. accelerează la început și încetinește la sfârșit.
Puteți decide că tranziția va avea loc cu o rată constantă. Funcția de timp poate accelera sau încetini tranziția.
Cea mai ușoară modalitate de a vizualiza funcțiile de timp este de a schimba proprietățile de poziționare. ca și stânga.
Rețineți că toate tranzițiile au același timp (1 secundă).
Dacă doriți să obțineți o idee despre cum funcționează alte funcții de timp, uitați-vă la această foaie de înșelătorie.
cub-bezier
Dacă toate aceste funcții de timp gata nu se încadrează, puteți scrie propriile dvs. folosind curbele Bezier.
Site-ul cubic-bezier.com este un instrument simplu pentru scrierea vizuală a curbelor proprii.
tranziție întârziere
tranziția-întârziere determină întârzierea, adică, cât timp așteaptă tranziția. înainte de a începe de fapt.
La fel ca în cazul duratei de tranziție, puteți utiliza secunde sau milisecunde (ms).
Articole similare
Trimiteți-le prietenilor: