Dynamic CSS: transformarea obiectelor

Animarea elementelor de pagină poate funcționa ca un proces autonom sau poate fi efectuată pentru a vizualiza acțiunile vizitatorilor. În orice caz, transformarea CSS a elementului nu afectează fluxul global și este executată indiferent de conținutul paginii ca întreg.

Atunci când se utilizează reguli și se dezvoltă logica pentru schimbarea elementelor, utilizarea valorilor corecte ale proprietăților și regulilor este foarte importantă. Transformarea CSS nu oferă dezvoltatorului capabilități de gestionare. Toate transformările sunt efectuate în funcție de funcțiile date și valorile lor.

Reguli generale de transformare

Logica realizată în ideea funcției de transformare este distorsiunea elementului. Elementele de pagină sunt o zonă dreptunghiulară, chiar dacă este reprezentată de o grafică netedă în interiorul acesteia.

Schimbând dimensiunile laturilor zonei sau deplasarea (deplasarea) poate fi:

• se formează dinamica;
• perspectiva se formează;
• volumul este îndeplinit.

În orice caz, toate transformările apar pe plan, dar rezultatul este posibil atât în ​​cartografiere 2D cât și în 3D.

Următorul exemplu prezintă patru zone, fiecare cu o transformare CSS.

Ultimul rând de imagini este originalul, rândul de jos este rezultatul aplicării funcțiilor. Pentru a demonstra principalele caracteristici utilizate următoarea descriere a CSS și arată inserarea în HTML a paginii.

În acest exemplu, transformarea apare atunci când plasați mouse-ul peste un element și este atribuit prin hover pseudo-clasă.

În ceea ce privește proprietatea transformată atunci când se utilizează funcția traducere, trebuie remarcat faptul că transformarea CSS poate fi înlocuită cu proprietățile din stânga și de sus. În ceea ce privește distorsiunea față de funcția oblică - rezultatul poate să nu fie previzibil.

Se crede că oblicul este rar folosit, dar cu o aplicație adecvată și complexă, animația CSS cu oblic va permite să se construiască dinamica în spațiul tridimensional atunci când elementul se mișcă. De exemplu, "nava spațială în orbită" în contextul unei pagini web poate fi o mișcare a bunurilor prin magazinul din spațiul magazinului.

Perspectiva în Transformare

Transformarea textului în CSS poate avea un efect special atunci când se aplică perspectiva. Exemplul arată modul în care o reprezentare normală a unui text poate fi transformată într-un text pseudo-3D.

Poate că acest lucru are sens în unele probleme, dar practicitatea ideii inverse este evidentă: puteți pune informații în perspectivă și când treceți peste ea, mouse-ul este transformat într-un afișaj normal. Este compact și eficient.

Aceste exemple de transformare sunt descrise în CSS după cum urmează:

Utilizarea proprietății de origine transformată vă permite să determinați punctul în care va avea loc transformarea. Deplasând acest punct, puteți controla centrul, în raport cu care se efectuează transformarea CSS.

Funcția de rotire are două opțiuni - rotateX și rotateY - dar fără "X" și "Y" are un parametru.

În toate cazurile, transformarea elementelor ar trebui să fie depistată pe exemple simple, pentru a evita un rezultat neașteptat. Este mai bine să formăm corect o regulă și să descriem proprietatea pentru un element simplu decât să includem imediat în spectrul transformărilor dorite. Formularea corectă a regulilor și proprietăților în CSS este cheia succesului și rezultatelor eficiente.

Aplicarea proprietății de animație

Animația CSS prin intermediul animațiilor și al cheilor de chei @ completează posibilitățile de transformare, permițându-le să fie transformate într-o reprezentare reală prin mișcarea controlată a unui element sau printr-o transformare controlată a formei sale.

Linia de sus a elementelor este starea lor normală. Prima coloană se mișcă, cea de-a doua coloană se rotește, iar a treia coloană se scală. Afișate câteva cadre. Pentru a implementa această funcție, se folosește următorul cod:

Dinamica și durata procesului pot fi setate în animație și @ chei cheie. Este disponibilă o schimbare treptată și graduală a procesului. Puteți aplica schimbări și mișcări uniforme cu accelerația.

Proprietăți animație

Proprietatea de animație este de obicei scrisă într-o singură linie. Acesta include opt parametri:

• animation-name - numele animatiei;
• durata animației - durata animației (secunde "s", milisecunde "ms");
• animație - funcție de sincronizare - tip de animație (ușurință, liniară, ușurință, ușurință în ușă, ușurință în afară, cubic-bezier);
• animație-iterație-număr - numărul de repetări ale animației sau infinit;
• direcția de mișcare - direcția mișcării (normal, invers, alternativ, alternativ-invers);
• animație-joc-stare - animație oprită (funcționare, întreruptă);
• animație-întârziere - întârziere animație înainte de începerea redării (secunde "s", milisecunde "ms");
• animație-umplere-mod - redați animația în afara timpului de redare specificat (
• nici unul, înainte, înapoi, ambele);

Când dezvoltați o animație prin animație, proprietățile de transformare sunt specificate în regula @keyframes, care definește secvența transformării elementului în pași.

Opțiuni importante de animație

Orice animație are un nume, o durată și un tip. Numele definește descrierea necesară a @frame-cheie, lungimea specifică timpul procesului, iar tipul specifică varianta de mișcare.

Dacă este necesar un proces uniform (mișcare și / sau transformare), se folosește valoarea liniară. Dacă doriți să aveți accelerație la început - ușurință, dacă la sfârșit - ușurință. Pur și simplu ușurință este alunecare, și ușurință în-out este versiunea ei mai fină.

Valoarea cubic-bezier vă permite să formulați o versiune complexă a mișcării și să construiți o versiune mai originală a animației.

Pe site-ul Web al producătorului, puteți alege orice opțiune de trafic standard și proiectați-vă propriul. Când faceți clic pe butonul "GO!", Două pătrate se vor mișca în paralel și puteți compara diferențele și forma vizuală a comportamentului dorit al elementului.

Construcția cadrelor de animație

Proprietatea @keyframes este "determinantul" cadrelor (vezi exemplul de mai sus) prin care elementul se transformă. Ideea unei proprietăți este foarte simplă, dar oferă oportunități extraordinare.

Procesul începe la 0% și se termină la 100% din timpul total alocat animației. Puteți utiliza numai punctele finale de la și la, sau 0% și 100%. Un efect mai mare poate fi obținut prin împărțirea întregului proces de animație / transformare în secțiuni. Pasul unui site poate fi oricare.

De obicei, sunt acceptate mai multe opțiuni: 0%, 25%, 50%, 75% și 100%. Uneori sunt suficiente doar trei cadre: 0%, 50% și 100%. Cum să acționați în fiecare caz depinde de sarcină și de dezvoltator.

La construirea oricărei versiuni a transformării, trebuie respectată o regulă importantă. Nu este întotdeauna posibil să utilizați jаvascript, în special pentru a schimba în mod programatic proprietățile elementelor, de exemplu, modificarea valorii proprietății imaginii de fundal.

HTML, CSS și jаvascript sunt perfect combinate, dar în toate cazurile trebuie să țineți cont de funcționalitatea reală a fiecăruia dintre componente. În mod ideal, când lucrează într-o combinație clară și nu interferează unul cu celălalt.