folosit bine, CSS animation este un instrument incredibil de util și puternic. Poate adăuga interes sau entuziasm creativ, direcționează ochiul utilizatorului, explică ceva rapid și succint și îmbunătățește gradul de utilizare. Din acest motiv, ultimii ani au văzut din ce în ce mai multă animație pe site-uri și în aplicație. în acest articol, vom rotunji unele dintre cele mai tari Exemple de animație CSS pe care le-am văzut și vă vom arăta cum să le recreați., Citiți mai departe pentru o serie de tutoriale aprofundate și efecte de inspirație (și link-uri către codul lor) pentru a explora.

ce este animația CSS?

animația CSS este o metodă de animare a anumitor elemente HTML fără a fi nevoie să folosiți JavaScript sau Flash-uri înfometate de procesor și memorie. Nu există nicio limită la numărul sau frecvența proprietăților CSS care pot fi modificate. Animațiile CSS sunt inițiate prin specificarea cadrelor cheie pentru animație: aceste cadre cheie conțin stilurile pe care le va avea elementul.,deși poate părea limitat când vine vorba de animație, CSS este de fapt un instrument cu adevărat puternic și este capabil să producă animații 60fps frumos netede. „Furnizarea de animații grijulii și fluide care contribuie la o profunzime semnificativă a site-ului dvs. nu trebuie să fie dificilă”, spune dezvoltatorul web front-end Adam Kuhn. „Proprietățile CSS moderne vă oferă acum aproape toate instrumentele de care aveți nevoie pentru a crea experiențe memorabile pentru utilizatorii dvs.,”

cele mai bune animații încă își au rădăcinile în cele 12 principii clasice de animație Disney – veți vedea mai multe mențiuni despre asta în aceste exemple de animație CSS, așa că merită să verificați acel articol înainte de a începe. S-ar putea dori, de asemenea, să exploreze roundup nostru de mare Videoclipuri muzicale animate pentru exemple suplimentare și inspirație.regula de aur este că animațiile CSS nu ar trebui să fie exagerate – chiar și o mișcare mică poate avea un impact mare și prea mult poate distrage și irita utilizatorii., Iată exemplele noastre preferate și cum să le recreăm.

Fun mouse effect

  • autor: Donovan Hutchinson

acesta este un efect distractiv care urmează mouse-ul în jurul. Ar putea fi util atunci când doriți să atrageți atenția asupra unui element de pe pagina dvs.

Avem nevoie de foarte puțin HTML pentru acest efect:

<div class="demo"> <div class="perspective-container"> <div class="card"></div> </div></div>

în Primul rând, vom poziția demo-ul și a stabilit perspectivă pentru 3D transforma:

Apoi stilul div vrem să anima:

Aici vom seta un fundal, apoi ne-am stabilit preaplin ascuns, astfel încât să putem adăuga un luciu efect mai târziu., De asemenea, am stabilit variabile css, sheenX și sheenY.

aceste variabile sheen vor ajuta la poziționarea efectului sheen. Le folosim în pseudo-elementul după carte:

aici ne asigurăm că pseudo-elementul este mai mare decât containerul. Acest lucru ne va da ceva să alunece în jurul valorii de pe partea de sus a cardului folosind transform.

proprietatea transform folosește acele variabile CSS pe care le-am setat mai devreme. Vom seta cele cu JavaScript. Să configurăm JavaScript pentru a asculta mai întâi evenimentele mouse-ului:

document.,onmousemove = handleMouseMove;

acum Avem nevoie de un handleMouseMove funcție pentru a ocupa onmousemove:

funcția Noastră are fereastră înălțime și lățime și creează un unghi pe axele X și Y. Apoi le-am setat la stilul de transformare al cărții noastre. Acest lucru oferă cardului un unghi bazat pe mouse-ul!apoi apelăm la o funcție pentru a seta poziția pseudo-elementului:

pseudo-elementul nostru arată cel mai bine atunci când se mișcă în direcția opusă mouse-ului. Pentru a realiza acest lucru, creăm un număr între -0, 5 și 0, 5 care se schimbă în direcția opusă calculând raportul cu -1.,înmulțim acest număr cu 800, așa cum dorim să se extindă până la maximum 400px, ceea ce este cât de departe setăm pseudo-elementul sheen în afara cardului.

în cele din urmă am setat aceste valori offset la proprietățile variabile CSS, iar renderer-ul browserului face restul.avem acum o carte care se întoarce spre fața mouse-ului nostru în timp ce efectul de strălucire se mișcă în direcția opusă deasupra. Acest lucru creează un efect frumos, atrăgător.,

the big reveal

  • Author: Adam Kuhn

efectele reveal de conținut animat par a fi destul de populare în acest moment și, utilizate corect, pot capta atenția utilizatorului și vă pot implica publicul. Ați mai văzut acest lucru înainte: un bloc de culoare crește dintr-o parte sau alta pe orizontală sau pe verticală și apoi se retrage în partea opusă, de data aceasta dezvăluind un text sau o imagine de dedesubt. Este un concept care ar putea părea complicat, dar se bazează într-adevăr pe doar câteva lucruri.,

În primul rând, vom configura poziționarea elementului nostru (descărcați codul complet aici) – definiți-l ca fiind relativ (numai static va eșua în acest caz). În cazurile de text, este mai bine să permiteți înălțimea și lățimea automată, deși un pic de umplutură nu doare. De asemenea, vom defini o origine a transformării, în cazul elementului părinte pe care dorim să îl folosim poziția de pornire. Deoarece vrem ca elementul să fie ascuns inițial, vom folosi o transformare de scară de-a lungul axei corespunzătoare pentru a-l micsora.

în continuare, un element pseudo pentru a masca părintele nostru, setând transform origin la opțiunea opusă., În cele din urmă, șir împreună animații, folosind fie funcțiile de sincronizare sau întârzieri pentru a compensa fiecare.Notă, Am compensat animațiile părintelui și ale elementului pseudo cu o întârziere care spune căsuței care ascunde textul nostru să-l dezvăluie numai după ce elementul în sine a fost complet scalat în vedere. Check out Codepen de mai jos.după ce ați început să acumulați o bibliotecă decentă cu diverse fragmente de relaxare, este timpul să căutați alte modalități de a îmbunătăți profunzimea animațiilor dvs., iar una dintre cele mai bune metode este să vă compensați elementele animate.,

este prea comun ca un declanșator JavaScript să fie setat să inițieze o grămadă de animații bazate pe poziția de derulare, doar pentru a găsi toate elementele care se mișcă eficient în tandem. Din fericire CSS în sine oferă o proprietate simplă care poate face (sau rupe) experiența dvs. animată: animație-întârziere.să presupunem că, de exemplu, avem o grilă de imagini pe care dorim să le animăm în cadru atunci când utilizatorul derulează. Există o serie de moduri în care am putea declanșa acest lucru, cel mai probabil adăugând clase elementelor pe măsură ce intră în viewport., Cu toate acestea, acest lucru poate fi destul de greu în browser și poate fi evitat prin simpla adăugare a unei singure clase la un element container și definirea întârzierilor de animație pe elementele copil.

acesta este un caz de utilizare deosebit de bun pentru preprocesoare precum SCSS sau mai puțin, care ne permit să folosim o buclă @for Pentru a itera prin fiecare element.

#parent{.child{ animation: animationName 1.5s ease-in-out 1 forwards;@for $i from 1 through 20{ &:nth-of-type(#{$i}){animation-delay:#{$i/10}s; }} }}

aici veți vedea cu SCSS suntem capabili de a bucla prin fiecare :selector de tip N-lea, apoi se aplică o întârziere de animație bazat pe valoarea numerică a fiecărui element copil., În acest caz, veți observa că împărțim calendarul nostru pentru a reduce fiecare creștere la o fracțiune de secundă. În timp ce compensarea elementelor dvs. animate poate da emoție animației dvs., întârzierea prea mare o poate face să se simtă disociată. Check out acest CodePen de mai jos.

Squigglevision

  • Author: Adam Kuhn

filtrele SVG oferă o modalitate excelentă de a obține o senzație naturală, desenată manual și de a scăpa de unele dintre constrângerile de redare ale CSS singure. Animarea lor poate spori și mai mult efectul.

caz în punct: Squigglevision., Da, acesta nu este un termen tehnic cunoscut de majoritatea animatorilor, dar cu siguranță l-ați văzut folosit în desene animate. Ideea este că marginile de aceste elemente animate nu sunt doar oarecum zimțate și necioplit, dar aceste margini aspre rapid variate, cadru cu cadru, făcându-i să se simtă ca și cum ar fi fost rupt din paginile unui caiet de schițe și a adus la viață.pentru a obține acest efect, putem include un SVG pe pagina noastră cu mai multe filtre și ușoare variații ale nivelurilor de turbulență pentru fiecare. Apoi, vom configura cronologia animației noastre, apelând fiecare filtru în propriul cadru cheie., Este important să ne jucăm cu duratele de sincronizare, deoarece anticipăm că animația se va simți „jumpy”, dar nu o dorim atât de lent încât să ne simțim despărțiți sau atât de repede încât să ne simțim nebuni. în acest scop ,este important să rețineți că CSS nu are capacitatea de a trece fără probleme între filtrele SVG, deoarece nu există nicio modalitate de a accesa proprietăți precum turbulența și scara, astfel încât aceste tipuri de animații ar trebui să fie întotdeauna așteptate să fie instabile.,

se Rostogolea litere

  • după Cum se vede pe: Jocul Anului
  • Autor: Leon brown

Google Joc al Anului, dispune de un jucaus animație CSS pe pagina, cu titlul de cuvinte rostogolindu-se și ciocnindu-se unul pe altul. Iată cum a fost făcut.

primul pas este să definiți documentul paginii web cu HTML. Se compune din containerul de documente HTML, care stochează o secțiune de cap și corp., În timp ce secțiunea head este utilizată pentru a încărca resursele externe CSS și JavaScript, corpul este utilizat pentru a stoca conținutul paginii.conținutul paginii este format din trei etichete de titlu h1 care vor afișa diferitele variații ale efectului de animație. În timp ce orice text poate fi inserat în aceste etichete, animația lor este definită de numele din atributul clasei. Setările de prezentare și animație pentru aceste nume de clase vor fi definite în CSS mai târziu.

apoi, creați un nou fișier numit ‘code.js’., Vrem să găsim toate elementele paginii cu clasa animate și să creăm o listă de matrice reprezentând fiecare cuvânt al textului interior. Întârzierea inițială de animație este, de asemenea, definită în acest pas. Conținutul paginii nu este disponibil până când pagina nu s-a încărcat complet, deci acest cod este plasat în ascultătorul evenimentului de încărcare al ferestrei.conținutul cuvântului elementelor de animație trebuie să fie conținut într-un element de deschidere. Pentru a face acest lucru, conținutul HTML existent este resetat la gol, apoi o buclă este utilizată pentru a face cuvântul din lista „cuvinte” identificate un element de deschidere., În plus, se aplică un stil animationDelay-calculat în raport cu întârzierea inițială (specificată mai jos) și poziția indexului cuvântului.

creați un fișier nou numit stiluri.css. Acum vom stabili regulile de prezentare care vor face parte din fiecare element de cuvânt din animație, controlat de eticheta lor span. Afișarea ca bloc, combinată cu alinierea textului centrat, va avea ca rezultat apariția fiecărui cuvânt pe o linie separată aliniată orizontal la mijlocul containerului său. Poziționarea relativă va fi utilizată pentru a anima în raport cu poziția fluxului de text.,

.animate span{display: block;position: relative;text-align: center;}

elementele de animație care au clasa înapoi și înainte au o animație specifică aplicată acestora. Acest pas definește animația care se aplică elementelor de deschidere al căror container părinte are atât clasa animate, cât și clasa înapoi sau înainte.

rețineți că nu există spațiu între referința clasei animate și înapoi, ceea ce înseamnă că elementul părinte trebuie să le aibă pe ambele.

animația mixtă este definită folosind aceleași setări utilizate pentru animațiile înainte și înapoi., În loc de a aplica animațiile pentru fiecare copil al părintelui, selectorul n-copil este utilizat pentru a aplica setările de animație alternativ. Animația înapoi este aplicată fiecărui copil cu număr par, în timp ce animația înainte este aplicată fiecărui copil cu număr impar.animațiile pe care tocmai le-am creat sunt realizate cu o poziție inițială de pornire „de la”, fără nicio poziție verticală sau ajustare de rotație. Poziția ” to ” este starea finală a animației, care stabilește elementele cu o poziție verticală ajustată și o stare de rotație., Setările de sfârșit ușor diferite sunt utilizate pentru ambele animații pentru a evita ca textul să nu poată fi citit din cauza suprapunerii în animații mixte.

Flip book

  • autor: Adam Kuhn

când animați cu CSS, uneori este necesară o abordare simplă moartă. Și există câteva metode de animație mai simple decât cartea flip. Folosind steps () ca funcție de sincronizare, suntem capabili să reproducem acest efect. În timp ce acest lucru ar putea suna instabil și contrazice în mod direct misiunea noastră de a menține fluiditatea, cu ritmul potrivit se poate simți la fel de perfect organic.deci ,cum funcționează?, Definim funcția noastră de relaxare a animației cu doar câțiva parametri suplimentari – spunând animației noastre câți pași sunt necesari și în ce moment în timpul primului pas am dori să începem (început, sfârșit) – arătând cam așa, de exemplu pași (10, început).

în cadrul cadrelor cheie, putem desemna acum un punct final al animației noastre: pentru acest exemplu, să presupunem că animația noastră durează 10 secunde și folosim 10 pași. În acest caz, fiecare pas va avea o secundă lungă, trecând imediat la următorul cadru de o secundă, fără tranziție între ele.,din nou, acest lucru pare să zboare în fața fluidității, Dar iată unde animațiile în trepte pot străluci cu adevărat. Putem itera treptat printr-o foaie de sprite și anima cadru cu cadru la fel ca o carte flip. Definind cadre de dimensiuni egale, dar compilându-le pe o singură imagine orizontală (sau verticală), putem seta această imagine ca fundal element și putem defini o poziție de fundal pixel sau procent ca punct final al animației noastre, permițând un singur pas pentru fiecare cadru., Foaia sprite va schimba apoi și va popula elementul cadru cu cadru cu o imagine de fundal proaspătă în funcție de poziția sa.

Să aruncăm o privire la un exemplu. În acest caz, unele seturi de picioare animate anexate la unele caractere de text. În primul rând, vom defini numele animație, durata, numărul de pas, poziția de start și iterație numeri: 

animation:runner 0.75s steps(32, end) infinite;

din Nou, rețineți că durata este relativ rapidă, în mai puțin de o secundă plină de 32 total de cadre., În continuare, vom defini cadrele cheie: 

@keyframes runner{ from{ background-position:0px 50%;} to{ background-position:-1280px 50%; }}

Rețineți că poziționarea verticală a imaginii este constantă pe tot parcursul, care ne spune că sprites sunt întinse orizontal pe imagine, care este 1280px în lățime totală. Așa cum am definit 32 cadre totale pentru acea imagine, putem deduce că fiecare cadru ar trebui să aibă o lățime de 40px. Check out acest Codepen de mai jos.este important să rețineți că o foaie sprite mare poate fi o tragere severă a performanței, deci asigurați-vă că dimensionați și comprimați imaginile., Cu o foaie de sprite bine artizanale și o durată de animație corespunzătoare aveți acum o animație buna capabil să transmită mișcări complexe.

Suflare bule

  • după Cum se vede pe: 7UP
  • Vizualizarea codului
  • Autor: Steven Roberts

CSS bule de animație, care oferă pe 7UP este un frumos exemplu de a transporta o temă de brand prin în web design. Animația constă din câteva elemente: „desenul” SVG al bulelor și apoi două animații aplicate fiecărui balon., prima animație schimbă opacitatea bulei și o mișcă vertical în caseta de vizualizare; a doua creează efectul de mișcare pentru un plus de realism. Compensările sunt gestionate prin direcționarea fiecărui balon și aplicarea unei durate și întârzieri diferite de animație.

în scopul de a crea bule noastre vom folosi SVG. În SVG-ul nostru creăm două straturi de bule: unul pentru bulele mai mari și unul pentru bulele mai mici. În interiorul SVG poziționăm toate bulele noastre în partea de jos a casetei de vedere.,pentru a aplica două animații separate SVG-urilor noastre, ambele folosind proprietatea transform, trebuie să aplicăm animațiile elementelor separate. <g> element în SVG poate fi folosit mai mult ca un div in HTML; avem nevoie să-și încheie fiecare bule (care sunt deja într-un grup) într-un grup de tag-ul.

<g> <g transform="translate(10 940)"> <circle cx="35" cy="35" r="35"/> </g></g>

CSS are un motor puternic de animație și un cod foarte simplu pentru a produce animații complexe., Vom începe cu mutarea bule în sus pe ecran și schimbarea opacității lor, în scopul de a le estompeze și în afară de la începutul și sfârșitul animației.

@keyframes up { 0% { opacity: 0; } 10%, 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(-1024px); }}

pentru a crea un efect de wobbling, trebuie pur și simplu să mutăm (sau să traducem) bula la stânga și la dreapta, doar cu suma potrivită – prea mult va face ca animația să pară prea jaunting și deconectată, în timp ce prea puțin va trece în mare parte neobservată. Experimentarea este esențială atunci când lucrați cu animație.,

@keyframes wobble { 33% { transform: translateX(-50px); } 66% { transform: translateX(50px); } }

pentru a aplica animația bulelor noastre, vom folosi Grupurile pe care le-am folosit mai devreme și ajutorul celui de-al nouălea tip pentru a identifica fiecare grup de bule individual. Începem prin aplicarea unei valori de opacitate bulelor și a proprietății de schimbare a voinței pentru a utiliza accelerația hardware.

.bubbles-large > g { opacity: 0;will-change: transform, opacity;}.bubbles-large g:nth-of-type(1) {...}....bubbles-small g:nth-of-type(10) {...}

vrem să păstrăm toate ori de animație și întârzieri în câteva secunde unul de celălalt și setați-le să se repete la infinit. În cele din urmă, aplicăm funcția de sincronizare ease-in-out la animația noastră wobble pentru a face să pară puțin mai naturală.,

defilare mouse-ul

  • așa cum se vede pe: Baltic Training
  • vezi codul
  • autor: Steven Roberts

o animație mouse-ul defilare subtil poate da direcția utilizatorului atunci când primul teren pe un site web. Deși acest lucru poate fi realizat folosind elemente HTML și proprietăți, vom folosi SVG ca acest lucru este mai potrivit pentru desen.

în interiorul SVG-ului nostru avem nevoie de un dreptunghi cu colțuri rotunjite și un cerc pentru elementul pe care îl vom anima, folosind SVG putem scala pictograma la orice dimensiune avem nevoie.,acum am creat SVG-ul nostru, trebuie să aplicăm câteva stiluri simple pentru a controla dimensiunea și poziția pictogramei în containerul nostru. Am înfășurat un link în jurul mouse-ului SVG și l-am poziționat în partea de jos a ecranului.

.scroll-link { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%);}.mouse { max-width: 2.5rem; width: 100%; height: auto;}

în continuare vom crea animația noastră. La 0 și 20 la sută din drum prin animația noastră, vrem să stabilim starea elementului nostru pe măsură ce începe. Setându-l la 20% din drum, va rămâne nemișcat o parte din timp când se va repeta la infinit.,

@keyframes scroll { 0%, 20% { transform: translateY(0) scaleY(1); }}

trebuie să adăugăm punctul de pornire al opacității și apoi să transformăm atât poziția Y, cât și scara verticală la marcajul de 100%, sfârșitul animației noastre. Ultimul lucru pe care trebuie să-l facem este să renunțăm la opacitate pentru a ne estompa cercul.

@keyframes scroll { ... 10% { opacity: 1; } 100% { transform: translateY(36px) scaleY(2); opacity: 0.01; }}

În cele din urmă, aplicăm animația cercului, împreună cu proprietatea ‘transform-origin’ și proprietatea will-change pentru a permite accelerarea hardware. Proprietățile de animație sunt destul de auto-explicative., Funcția de sincronizare cubică-bezier este utilizată pentru a trage mai întâi cercul înapoi înainte de a-l arunca în partea de jos a formei mouse-ului nostru; acest lucru adaugă o senzație jucăușă animației.,

imagini de scris

Click pentru a vedea animația în acțiune
  • după Cum se vede pe: Grădină Opt
  • Vezi codul pentru căi și text
  • Autor: Steven Roberts

La Grădină Opt site-ul foloseste un comun de tehnici de animație prin care textul pare a fi scris. Pentru a obține efectul, ne întoarcem la SVG. Pentru început, vom crea SVG., Există două abordări aici: convertiți textul în căi pentru a le anima sau pentru a utiliza textul SVG. Ambele abordări au argumente pro și contra.

începeți prin crearea animației keyframe. Singura funcție pe care trebuie să o îndeplinim este schimbarea stroke-dashoffset. Acum că am creat animația, trebuie să aplicăm valorile din care vrem să animăm. Am setat cursa-dasharray, care va crea lacune în cursa. Vrem să setăm cursa noastră să fie o valoare suficient de mare pentru a acoperi întregul element, compensând în cele din urmă liniuța cu lungimea cursei.,

magia se întâmplă atunci când aplicăm animația noastră. Prin animarea decalajului, aducem accidentul vascular cerebral în vedere – creând un efect de desen. Dorim ca elementele să deseneze unul câte unul, cu unele suprapuneri între sfârșitul desenării unui element și începutul desenării următorului. Pentru a realiza acest lucru, apelăm la Sass/SCSS și nth-of-type pentru a întârzia fiecare literă cu jumătate din lungimea animației, înmulțită cu poziția acelei litere.,

păsări care Zboară

  • după Cum se vede pe: Fournier Père et Fils
  • Vezi codul pentru o singură pasăre sau toată turma
  • Autor: Steven Roberts

Vom începe cu complet drept vector de linii, desen fiecare cadru de animație nostru, reprezentând o pasăre într-o altă stare de zbor. Apoi manipulăm punctele vectoriale și rotunjim liniile și marginile. În cele din urmă, punem fiecare cadru într-o cutie de dimensiuni egale și le așezăm una lângă alta. Exportați fișierul ca SVG.

configurarea HTML este foarte simplă., Trebuie doar să înfășurăm fiecare pasăre într – un recipient pentru a aplica mai multe animații-una pentru a face pasărea să zboare și cealaltă pentru a o muta pe ecran.

<div class="bird-container"> <div class="bird"></div></div>

aplicăm SVG-ul nostru de păsări ca fundal pentru div-ul nostru de păsări și alegem dimensiunea pe care dorim să o aibă fiecare cadru. Folosim lățimea pentru a calcula aproximativ noua poziție de fundal. SVG are 10 celule, așa că ne înmulțim lățimea cu 10 și apoi modificăm ușor Numărul până când pare corect.CSS animation are câteva trucuri de care este posibil să nu fiți conștienți., Putem folosi animation-timing-funcția pentru a arăta imaginea în pași-la fel ca flicking prin pagini într-un notebook pentru a face aluzie la animație.acum am creat ciclul nostru de zbor, pasărea noastră își bate în prezent aripile, dar nu merge nicăieri. Pentru a o muta pe ecran, vom crea o altă animație keyframe. Această animație se va muta pasărea pe ecran orizontal în timp ce, de asemenea, schimbarea poziției verticale și scara pentru a permite păsării să meandru peste mai realist.după ce ne-am creat animațiile, trebuie doar să le aplicăm., Putem crea mai multe copii ale păsării noastre și putem aplica diferite perioade de animație și întârzieri. 

.bird--one { animation-duration: 1s; animation-delay: -0.5s;}.bird--two { animation-duration: 0.9s; animation-delay: -0.75s;}

Crucea mea hamburger

  • după Cum se vede pe: o Mai bună Agenție de Brand
  • Vezi codul pentru deschideri și SVG
  • Autor: Steven Roberts

Această animație este folosit peste tot pe web, de cotitură trei linii în cruce sau aproape pictograma., Până de curând, majoritatea implementărilor au fost realizate folosind elemente HTML, dar de fapt SVG este mult mai potrivit pentru acest tip de animație – nu mai este nevoie să umflați codul butoanelor cu mai multe deschideri. datorită naturii animatabile și SVG și DOM – ul său navigabil, codul pentru realizarea animației sau tranziției se schimbă foarte puțin-tehnica este aceeași. începem prin crearea a patru elemente, fie că se întinde în interiorul unui div sau căi în interiorul unui SVG., Dacă folosim deschideri, trebuie să folosim CSS pentru a le poziționa în interiorul div; dacă folosim SVG, acest lucru este deja rezolvat. Dorim să poziționăm liniile 2 și 3 în centru – una peste alta – în timp ce distanțăm liniile 1 și 4 uniform deasupra și dedesubt, asigurându-ne că centrăm originea transformatei.

ne vom baza pe tranzitia a doua proprietati: opacitate si rotatie. În primul rând, dorim să estompăm liniile 1 și 4, pe care le putem viza folosind selectorul :nth-child.,

.menu-icon.is-active {element-type}:nth-child(1),.menu-icon.is-active {element-type}:nth-child(4) { opacity: 0; }

singurul lucru de făcut este să vizați cele două linii de mijloc și să le rotiți cu 45 de grade în direcții opuse.

Chasing circles

  • As seen on: Better Brand Agency
  • Vizualizați codul
  • autor: Steven Roberts

pictograma de încărcare animată este formată din patru cercuri. Cercurile nu au umplutură, dar au culori alternante.

în CSS-ul nostru, putem seta câteva proprietăți de bază pentru toate cercurile noastre și apoi putem folosi selectorul :nth-of-type pentru a aplica un alt stroke-dasharray fiecărui cerc.,

apoi, trebuie să creăm animația keyframe. Animația noastră este foarte simplă: tot ce trebuie să facem este să rotim cercul cu 360 de grade. Plasând transformarea noastră la nota de 50% a animației, cercul se va roti, de asemenea, înapoi în poziția inițială.

@keyframes preloader { 50% { transform: rotate(360deg); } }

cu animația noastră creată, acum trebuie doar să o aplicăm în cercurile noastre. Am setat numele animației; durata; numărul de iterații și funcția de sincronizare. „Ease-in-out” va da animației o senzație mai jucăușă., în acest moment, avem încărcătorul nostru, dar toate elementele se rotesc împreună în același timp. Pentru a remedia acest lucru, vom aplica unele întârzieri. Vom crea întârzierile noastre folosind un Sass pentru buclă.din cauza întârzierilor, cercul nostru animă acum la rândul său, creând iluzia cercurilor care se urmăresc reciproc. Singura problemă cu aceasta este că atunci când pagina Se încarcă mai întâi, cercurile sunt statice, apoi încep să se miște, unul câte unul. Putem obține același efect de offset, dar oprim pauza nedorită în animația noastră prin simpla setare a întârzierilor la o valoare negativă.,

animation-delay: -#{$i * 0.15}s;

Next page: More CSS animation examples to explore