Share
În prezent, din ce în ce mai multe site-uri folosesc animații, fie că sunt sub formă de GIF, SVG, WebGL, videoclipuri de fundal și așa mai departe. Atunci când este folosit în mod corespunzător, animația pe web aduce viață și interactivitate, adăugând un strat suplimentar de feedback și experiență pentru utilizatori.
În acest tutorial vă voi prezenta animațiile CSS; o modalitate extrem de performantă de a face lucruri care devin din ce în ce mai populare, deoarece se îmbunătățește suportul browserului. După ce ați acoperit elementele de bază, vom construi un exemplu rapid care va anima un element pătrat într-un cerc:
Designerii de pe Envato Market au fost ocupați creând o gamă de animații CSS pentru a vă conecta la site-urile dvs. web, de la umbre la panglici, glisoare și multe altele.
CSS3 Shadow Pack pe Envato MarketDe asemenea, puteți angaja un expert CSS pe Envato Studio pentru a vă ajuta cu o gamă largă de corecții și personalizări pentru proiectul dvs..
Experți CSS pe Envato StudioPrincipala componentă a animațiilor CSS este @keyframes, regula CSS unde este creată animația. A se gandi la @keyframes ca etape de-a lungul unei cronologii. Interior @keyframes, puteți defini aceste etape, fiecare având o declarație de stil diferită.
Apoi, pentru a face animații CSS să funcționeze, trebuie să le legați @keyframes la un selector. Acest lucru va analiza treptat tot codul din interiorul lui @keyframes și schimba stilul inițial în noul stil, bazat pe etape.
Aici vom seta etapele de animație. Al nostru @keyframes proprietățile sunt:
De exemplu:
@ cadre cheie tutsFade 0% opacity: 1; 100% opacitate: 0;
sau:
@ keyframes tutsFade din opacity: 1; la opacity: 0;
sau stenografia:
@ keyframes tutsFade la opacity: 0;
Codul de mai sus va aplica o tranziție la opacitatea unui element de la opacitate: 1 la opacitate: 0. Fiecare dintre abordările de mai sus va obține același rezultat final.
animaţie proprietate este folosit pentru a apela @keyframes în interiorul unui selector CSS. Animația poate avea mai multe proprietăți:
Accentsconagua
animație nume-: @keyframes nume (amintiți-ne că am ales tutsFade).animație durată: durata lungimii, durata totală a animației de la început până la final.animație-sincronizare-funcție: stabilește viteza de animație ( liniar | ușurință | ușurință. | ușurință ușurință în afară | cub-bezier ).animație întârziere: întârzierea înainte de animația noastră va începe.animație-iterație-count: De câte ori se va repeta prin animație.animație direcția: vă oferă posibilitatea de a schimba direcția buclă, de la început până la sfârșit sau de la sfârșit la început sau ambele.animație-fill-mode: specifică ce stiluri vor fi aplicate elementului atunci când animația noastră este finalizată ( nici unul | înainte | înapoi | ambii )De exemplu:
.element animație-nume: tutsFade; animație-durată: 4s; animație-întârziere: 1s; animație-iterație-count: infinit; animație-temporizare-funcție: liniară; animație-direcție: alternativă;
sau stenografie:
.element animație: tutsFade 4s 1s infinit liniar alternativ;
Codul de mai sus va crea un efect intermitent, cu o întârziere de animație de 1 secundă, o durată de animație totală de 4 secunde, cu direcție alternativă și iterații de buclă liniară infinită.
În timp ce avem un proiect de lucru, trebuie să folosim prefixele specifice browserului pentru a asigura cel mai bun suport pentru browser. Prefixele standard se aplică:
-WebKit- -Moz- -o- -Domnișoară- Un animaţie proprietatea folosind prefixele furnizorilor va arata astfel:
.element -webkit-animație: tutsFade 4s 1s infinit liniar alternativ; -moz-animație: tutsFade 4s 1s infinit liniar alternativ; -ms-animație: tutsFade 4s 1s infinit liniar alternativ; -o-animație: tutsFade 4s 1s infinit liniar alternativ; animație: tutsFade 4s 1s infinit liniar alternativ;
alături de @keyframes:
@ -webkit-keyframes tutsFade / * stilul tău * / @ -moz-keyframes tutsFade / * stilul tău * / @ -ms-keyframes tutsFade / * stilul tău * / @ -o-keyframes tutsFade * stilul tău * / @keyframes tutsFade / * stilul tău * /
Din motive de lizibilitate în timpul acestui tutorial, voi continua în continuare fără a utiliza prefixe, dar versiunea finală le va include și aș dori să vă încurajez să le utilizați în codul dvs. CSS.
Pentru a afla mai multe despre prefixele furnizorilor, puteți verifica http://css3please.com/, care este un site web excelent pentru resursele prefixelor furnizorilor.
Puteți adăuga mai multe animații folosind un separator de virgule. Să spunem că vrem să adăugăm și o rotație suplimentară tutsFade element, am face acest lucru declarând extra @keyframes și apoi le obligăm la elementul nostru:
.element animație: tutsFade 4s 1s infinit liniar alternativ, tutsRotate 4s 1s infinit liniar alternativ; @frame de chei tutsFade la opacity: 0; @ cheile de chei tutsRotează to transform: rotate (180deg);
Hai să intrăm și să creăm o tranziție de formă simplă; o animație pătrată în cerc utilizând principiile de mai sus. Vom avea cinci etape în total și pentru fiecare etapă vom defini o rază de graniță, o rotație și o culoare de fundal diferită de elementul nostru. Vorbește destul, să mergem la codificare.
Mai întâi, să creăm marcajul, un element de animat. Nici măcar nu ne vom deranja cu numele de clasă, pentru moment vom folosi o div divizie:
Apoi, utilizând un selector de elemente (div ), Adăugați stilul implicit la div:
div width: 200px; înălțime: 200px; fundal-culoare: coral;
Acum să ne pregătim @keyframes, pe care o vom apela pătrat-to-cerc, și cele cinci etape
@ cadre cheie pătrat-la-cerc 0% 25% 50% 75% 100%
Trebuie să definim câteva stări în aceste etape, deci să începem prin dictarea border-radius pentru fiecare colț al pătratului:
@ -webkit-keyframes pătrat-la-cerc 0% border-radius: 0 0 0 0; 25% raza de graniță: 50% 0 0 0; 50% raza de graniță: 50% 50% 0 0; 75% raza de graniță: 50% 50% 50% 0; 100% raza de graniță: 50%;
În plus, putem declara altfel culoare de fundal pentru fiecare etapă.
@frame-cheie pătrat-la-cerc 0% raza de graniță: 0 0 0 0; fundal: coral; 25% raza de graniță: 50% 0 0 0; fundal: darksalmon; 50% raza de graniță: 50% 50% 0 0; fundal: indianred; 75% raza de graniță: 50% 50% 50% 0; fundal: lightcoral; 100% raza de graniță: 50%; fundal: darksalmon;
Pentru a lovi cu adevărat ideea acasă, să mergem dincolo border-radius și culoare de fundal prin rotirea div și adăugarea unui mic interes vizual.
@frame-cheie pătrat-la-cerc 0% raza de graniță: 0 0 0 0; fundal: coral; transforma: rotate (0deg); 25% raza de graniță: 50% 0 0 0; fundal: darksalmon; transforma: roti (45deg); 50% raza de graniță: 50% 50% 0 0; fundal: indianred; transforma: roti (90deg); 75% raza de graniță: 50% 50% 50% 0; fundal: lightcoral; transforma: rotate (135deg); 100% raza de graniță: 50%; fundal: darksalmon; transforma: rotate (180deg);
După ce am definit animația pătrat-cerc, trebuie să o aplicăm divului:
div width: 200px; înălțime: 200px; fundal-culoare: coral; animație: pătrat-la-cerc 2s 1s alternativă infinită;
Aici vedeți că am adăugat o stenogramă animaţie proprietate, care prevede:
pătrat-to-cerc.2s.1s.infinit, astfel încât va continua pe termen nelimitat.alterna, așa că va juca de la început până la sfârșit, apoi înapoi la început, apoi din nou până la sfârșit și așa mai departe. O ultima valoare pe care o putem adauga la proprietatea animatiei este animație-sincronizare-funcție. Aceasta va defini viteza, accelerația și decelerarea mișcării noastre. Această funcție poate fi o valoare foarte detaliată, care este dificilă pentru a calcula manual, dar există o mulțime de site-uri gratuite care oferă resurse și personaliza live pentru funcțiile de sincronizare a animației.
Un astfel de instrument este instrumentul de animație CSS Easing, așa că hai să folosim asta pentru a calcula funcția de sincronizare.
Aș dori să adaug un elastic efectul nostru pătrat-to-cerc animație, folosind o funcție cubică-bezier.
După ce ați jucat cu mânerele și ați generat un fel de curbă bezier, actualizați valoarea funcției de temporizare a animației utilizând fragmentul furnizat.
div width: 200px; înălțime: 200px; fundal-culoare: coral; animație: pătrat-în-cerc 2s 1s infinit cubic-bezier (1, .015, .295,1,225) alternativ;
Codul final, fără a utiliza prefixele furnizorilor ( -WebKit- , -Moz-, -Domnișoară-, -o- ) este după cum urmează:
div width: 200px; înălțime: 200px; fundal-culoare: coral; animație: pătrat-la-cerc 2s .5s infinit cubic-bezier (1, .015, .295, .225) alternativ; @frame-cheie pătrat-în-cerc 0% radius-limită: 0 0 0 0; fundal: coral; transforma: rotate (0deg); 25% raza de graniță: 50% 0 0 0; fundal: darksalmon; transforma: roti (45deg); 50% raza de graniță: 50% 50% 0 0; fundal: indianred; transforma: roti (90deg); 75% raza de graniță: 50% 50% 50% 0; fundal: lightcoral; transforma: rotate (135deg); 100% raza de graniță: 50%; fundal: darksalmon; transforma: rotate (180deg);
Totul funcționează bine în browserele moderne, dar Firefox are un obicei urât de transformare a obiectelor în mod necorespunzător. Uitați-vă la aceste linii zimțate pentru a vedea ce vreau să spun:
Din fericire, există o soluție pentru acest lucru. Adăugați următoarea schiță transparentă la div și Firefox va face lucrurile perfect!
schiță: 1px solid transparent;
Asta e! Am folosit sintaxa de animație CSS pentru a crea o animație simplă, repetată.
Pentru informații actualizate cu privire la suportul pentru browsere pentru animația CSS, consultați Utilizarea ... dar pe scurt, browserele de sprijin includ: Firefox 5+, IE 10+, Chrome, Safari 4+, Opera 12+.
