Folosind tranziții CSS3 aveți potențialul de a schimba aspectul și comportamentul unui element ori de câte ori există o schimbare a statutului său, de exemplu, atunci când un element ține cursorul, este nevoie să se concentreze, devine un element activ sau o legătură de tranziție.
Animație în CSS3 vă permite să modificați aspectul și comportamentul elementului cu câteva cadre cheie. Tranzițiile oferă o schimbare de la o stare la alta, în timp ce animația se poate stabili mai multe puncte de tranziție prin diferite cadre cheie.
După cum sa menționat deja, tranziția a avut loc, elementul ar trebui să primească statutul de schimbare și pentru fiecare stat sunt diferite stiluri de a fi definite. Cel mai simplu mod de a seta stiluri pentru diferite stări - este de a utiliza pseudo-clase: Hover. se concentreze. și activă: țintă.
Există patru proprietăți legate de tranziții în general, această tranziție-proprietate. tranziție durată. tranziție-calendarul-funcție și de tranziție întârziere. Nu toate acestea sunt necesare pentru a crea tranziție, cele mai populare primele trei.
In exemplul de mai jos, blocul schimba culoarea de fundal pentru o secundă într-un mod liniar.
demonstrație de tranziție
prefixe versiune furnizor
Codul de mai sus ca și celelalte probe de cod din această clasă nu folosesc prefixele versiune furnizor. Acest lucru se face prin a merge în scopul de a păstra o mică bucată de cod și clar. Pentru cel mai bun suport în toate browserele folosesc prefixe. Pentru referință, versiunea cu prefixul pentru codul de mai sus este după cum urmează.
tranziție-proprietate
proprietate de tranziție-proprietate determină ce proprietăți se va schimba în combinație cu alte proprietăți de tranziție. În mod implicit, schimbarea va fi toate proprietățile din diferite state. Cu toate acestea, numai proprietățile specificate în valoarea de tranziție de proprietate va fi afectată în nici un tranziții.
In exemplul de mai sus, proprietatea de fond este definit în valoarea tranziției-proprietate. Aici fundal - o caracteristică unică, care se va schimba în termen de o secundă într-un mod liniar. Orice alte proprietăți incluse atunci când elementul de stat se schimbă, dar nu a adăugat la valoarea tranziției-proprietate. nu primesc un comportament de tranziție, astfel cum se prevede în proprietățile de tranziție-durată sau de tranziție-sincronizare-funcție.
Dacă doriți să adăugați mai multe proprietăți pentru a tranziției, ele pot fi separate printr-o virgulă într-o valoare de tranziție-proprietate. Mai mult, acesta poate fi utilizat pentru toate tranziție a cuvântului cheie a tuturor proprietăților de elemente.
Demonstrarea tranziție proprietății
Proprietăți în tranziții
Este important de reținut că nu toate proprietățile pot fi transferate în mod. dar numai pentru proprietățile care au un punct la jumătatea drumului perceptibil. Culori, dimensiuni de font, și altele asemenea pot trece de la o valoare la alta, așa cum au recunoscut valoarea în intervalul unul față de celălalt. Pe afișajul de proprietăți. de exemplu, tranziția nu poate fi, deoarece nu are nici un punct de mijloc. Un set de cele mai populare funcții, la care se aplică următoarea tranziție.
tranziție durată
Durata tranziției este stabilită de proprietățile de tranziție durată. Valoarea acestei proprietăți este posibil să se utilizeze valorile timpului de bază, inclusiv secunde (s) și milisecunde (ms). Aceste valori pot fi, de asemenea, de timp setat și fracționată - .2s, de exemplu.
Atunci când trece mai multe proprietăți, puteți specifica mai multe lungimi, câte una pentru fiecare proprietate. Ca și în cazul valorii proprietății de tranziție-proprietate. mai multe lungimi pot fi declarate utilizând valori separate prin virgulă. Comanda este important în determinarea valorilor acestor proprietăți și durate specifice. De exemplu, prima proprietate stabilit în tranziție-proprietate. Acesta va coincide cu prima valoare în proprietate de tranziție-durată și așa mai departe.
Dacă mai multe proprietăți în contul de tranziție pentru o singură durată de valoare, se va cere toată durata proprietăților de tranziție.
Demonstrarea tranziție durată
funcţia de tranziție
Proprietatea de tranziție-temporizare-funcție este utilizată pentru a seta viteza la care tranziția va muta. Cunoscând lungimea proprietăților de tranziție în funcție de durată la tranziția poate fi de mai multe viteze într-o perioadă. Unele dintre cele mai populare valori ale cuvintelor cheie pentru proprietățile de tranziție-sincronizare-funcție includ liniară. ușurința în. ușurința-out și ușurința în-out.
Valoarea definește liniar de tranziție se deplasează într-o viteză constantă de la un stat la altul. Valoarea ușurința în determină tranziția care începe încet și accelerează în timpul tranziției, în timp ce valoarea-out determină ușurința de tranziție, care începe rapid și încetinește în timpul tranziției. Înțeles ușurința-in-out definește tranziția care începe încet accelerează în mijloc, și apoi încetinește din nou înainte de sfârșitul anului.
Pentru fiecare funcție de timp este în valoare de o curbă Bezier cubi, care pot specifica valori folosind cub-Bazier (x1, y1, x2, y2). Valorile suplimentare includ pas-start. Valoarea pas-oprire și etapele (<число шагов>, <направление>).
Atunci când trece mai multe proprietăți, puteți defini mai multe funcții și de timp. Aceste valori, ca și celelalte valori ale proprietăților de tranziție pot fi anunțate printr-o virgulă.
Demonstrarea funcției de tranziție
tranziție întârziere
Demonstrarea tranziție întârziere
tranziție proprietate de stenografie
Scrierea fiecare proprietăți de tranziție singură poate exercita, în special cu prefixe. Din fericire, există o tranziție de proprietate prescurtare. capabil să susțină toate aceste proprietăți și valori diferite. Folosind o singură tranziție valoare. puteți seta fiecare din valoarea sucursală în următoarea ordine: de tranziție-proprietate. tranziție durată. tranziție-calendarul-funcție și, în cele din urmă, de tranziție întârziere. Nu utilizați virgule cu aceste valori, dacă doriți să nu mai mult de o conversie.
Pentru a defini mai multe tranziții la o dată, selectați fiecare grup valorile de tranziție, și apoi utilizați o virgulă pentru a separa fiecare grup suplimentar de valori.
Demonstrarea proprietăților tranziției
buton uimitoare
Tranzițiile face cele mai multe dintre lucrările privind crearea unor interacțiuni vizuale de la un stat la altul, și sunt ideale pentru aceste tipuri de modificări unice de stare. Cu toate acestea, atunci când doriți mai mult control, trebuie să tranziție câteva state. Din acel moment tranzițiile du-te, dar vine în animație.
keyframes de animație
Pentru a instala mai multe puncte la care elementul ar trebui să facă regula de tranziție este @keyframes utilizat. Acesta include, de obicei, numele de animație, orice număr de puncte de control, precum și proprietățile deținute pentru animație.
Versiunea furnizor prefixele regulă @keyframes
@keyframes regula trebuie sa fie cu prefixele versiune furnizor, precum și toate celelalte proprietăți de tranziție și animație. Prefixe pentru @keyframes, după cum urmează:
Animația de mai sus se numește un diapozitiv. de stat începe imediat după deschiderea regulilor @keyframes. Alte puncte de control sunt specificate folosind cadre cheie procente, incepand de la 0% și lucrează până la 100%, cu punctul intermediar cu 50%. Dacă cuvintele cheie dorite de la și să fie folosit în loc de 0% și 100%. În plus față de 50% poate fi dat puncte de control suplimentare. Proprietăți pentru elementele de animație enumerate în cadrul fiecărui punct de control, la stânga și de sus în exemplul de mai sus.
Demonstrarea animație keyframe
Plasați cursorul pe mingea de mai jos pentru a vedea animația în acțiune.
animație nume-
După ce a declarat keyframes pentru a anima, acestea trebuie să fie atribuite elementului. Acesta utilizează animație nume-proprietate este numele regulilor @keyframes de animație. ca valoare de proprietate. Declarația de animație nume se aplică fiecărui element la care trebuie să fie setat animația.
Utilizarea unei proprietăți de animație nume astfel insuficientă. În plus, este necesar să se declare proprietatea de animație, durata și valoarea la browser-ul știu cât timp ar trebui să dureze până la finalizarea animației.
animație durată, funcție de timp și de animație întârziere
După ce ați declarat de animație nume-proprietate a unui element, animația se comportă ca tranziții. Acesta include un timp de durată și o funcție de întârziere atunci când se dorește. În primul rând de animație necesită mult timp declarată folosind proprietatea de animație durata. Ca și în cazul tranzițiilor, durata poate fi definită în câteva secunde sau milisecunde.
în funcție de timp și întârzierea poate fi anunțată prin intermediul unor proprietăți de animație-sincronizare-funcție și de animație întârziere. respectiv. Valorile acestor proprietăți de a imita și să se comporte în același mod ca și se face cu tranzițiile.
Animația de mai jos ar trebui să declanșeze o minge de rebound după ce trece în dreapta, dar numai dacă treceți peste scenă.
animație demonstrație
Plasați cursorul pe mingea de mai jos pentru a vedea animația în acțiune.
animație personalizată
Animație oferă, de asemenea, posibilitatea de a personaliza și mai mult comportamentul elementului, inclusiv posibilitatea de a specifica modul în care de multe ori se face animație, precum și direcția în care animația este completă.
animație-iterație-count
Implicit, animația începe ciclul său de o dată de la început până la sfârșit, și apoi se oprește. Animația se repetă de peste si peste din nou, poate fi folosit caracteristica de animație-iterație-count. Valorile pentru el includ întreg sau un cuvânt cheie infinit. Cu ajutorul unui număr de animație se va repeta de câte ori este indicat, în timp ce cuvântul cheie animație infinit se va repeta la nesfârșit și nu se opresc niciodata.
Demonstrație de animație-iterație-count
Plasați cursorul pe mingea de mai jos pentru a vedea animația în acțiune.
animație direcția
În afară de a fi capabil de a determina cât de multe ori repetă animație, puteți declara, de asemenea, direcția în care animația este finalizată, folosind proprietățile de animație-direcție. Valorile acestei proprietăți includ normale. inversă. alternativă și alternate-inversă.
Valoarea normală reproduce animația conform destinației prevăzute de la început până la sfârșit. Valoarea animației inverse joacă exact invers decât cel definit în regula @keyframes. Astfel, începând cu 100% și lucrează înapoi la 0%.
Valoarea va reproduce animație alternativ înainte și apoi înapoi. Cadrele cheie ea cuprinde efectuarea transmite de la 0% la 100%, apoi de la 100% la 0% în sens invers. Utilizarea proprietății de animație-iterație-count poate limita numărul de ori animația se execută înainte și înapoi. Decalajul este 1 când animația se extinde de la 0% la 100%, iar apoi se adaugă 1 când animația are loc în ordine inversă de la 100% la 0%. Combinând un total de două iterații. Semnificație inversează de asemenea, funcția alternativă în orice moment în timpul redării în sens invers. În cazul în care animația utilizează valoarea ușurința în care merge de la 0% la 100%, atunci folosește valoarea-out ușurință merge de la 100% la 0%.
În final, valoarea alternativă inversă combină ambele valori alternative și invers. începe animația înapoi și apoi mai departe. Valoarea Alternate inversă începe la 100%, iar la 0% se realizează, și apoi înapoi la 100%.
Demonstrarea animație direcția
Plasați cursorul pe mingea de mai jos pentru a vedea animația în acțiune.
animație-play-stat
Proprietatea animație-play-stat permite animație pentru a opri redarea sau întrerupe, folosind cuvinte cheie de rulare și întrerupte. respectiv. Când animația este scos din pauza, se reia de la starea actuală, și nu pornește din nou de la început.
In exemplul de mai jos, proprietate de animație-play-stat este întreruptă atunci când etapa este activă atunci când utilizatorul face clic pe ea. Rețineți că animația este suspendat temporar până când eliberați butonul mouse-ului.
Demonstrarea animație-play-stat
Plasați cursorul pe mingea de mai jos pentru a vedea animația în acțiune. Faceți clic pe opritoarele de animație.
animație-fill-mode
Proprietatea de animație-fill-mode specifică modul în care elementul urmează a fi stilizate - înainte, după sau înainte și după începerea animației. Proprietatea de animație-fill-mode ia patru valori ale cuvintelor cheie, inclusiv nici unul. înainte. în spate și ambele.
Valoarea nici unul nu se va aplica nici stiluri pentru elementul înainte sau după animația se execută.
forward Semnificație păstrează stiluri declarate în ultima spus cadrelor cheie. Aceste stiluri, cu toate acestea, pot afecta valorile de proprietate animație direcția și animație-iterație-count. în schimbare, în cazul în care se termină animația.
Înțeles spate se va aplica stiluri specificate la primul cadru cheie animație va rula. Aceasta include utilizarea acestor stiluri pentru tot timpul care poate fi setat în animație-întârziere. Înțeles în sens invers poate depinde și de valoarea unei proprietăți de animație-direcție.
În cele din urmă, să setați atât aplice comportamentul direct din valorile ambelor înainte și înapoi.
Demonstrație animație-fill-mode
Plasați cursorul pe mingea de mai jos pentru a vedea animația în acțiune. Faceți clic pe opritoarele de animație.
animație proprietate stenografie
animație demonstrație
Plasați cursorul pe mingea de mai jos pentru a vedea animația în acțiune. Faceți clic pe opritoarele de animație.