Animație CSS și capabilitățile sale

Puneți o întrebare, cum să faci animație

Secretul modelelor ideale

Principalul sfat care poate fi dat celor care doresc să învețe complet, ce este animația netedă a CSS, este asta. Cu experimente zilnice cu bucăți de coduri pregătite, încercați să efectuați propriile experimente. Într-un timp liber de la locul de muncă pe propriile site-uri, încercați să vedeți ce se întâmplă atunci când împăturiți unul sau altul de cod, pentru a studia o proprietate în întregime. Încercați să implementați tot felul de idei interesante folosind instrumente de limbă complet diferite, iar animația CSS se va deschide pentru dvs. pe noua parte. Acest sfat simplu este următorul: experimentați-vă singur.

Afișarea animației CSS

Și acum, să abordăm exemple interesante. În mod obișnuit, utilizarea standard a animației este de a schimba liniștit anumite elemente ale site-ului în timp. Dar asta e prea drăguț, nu crezi? Prin urmare, aici vom împărtăși cu dvs. un mod neobișnuit de a folosi timpul de apariție al animației.

Faptul este că schimbările actuale de pe site într-o animație sau în forma sa completă pot fi aproape instantanee. Pentru aceasta atribuim două cadre cheie, dar folosim un interval foarte mic. De exemplu, acesta poate fi egal cu 0,001%. În acest caz, animația CSS se poate întâmpla instantaneu. Acest lucru este perfect pentru a imita orice semn de neon. Acest semn va clipi, iar dacă animația CSS folosește în continuare transparența și proprietatea umbră text, semnul va fi aproape ca unul real.

Iată un exemplu de cod.

Îmbunătățirea funcționalității butoanelor

Dacă luăm în considerare problema cât de neobișnuită poate fi ea Butonul de animație CSS, atunci putem spune că opțiunile pentru decorarea butoanelor pe site-uri sunt multe. Să luăm în considerare un exemplu. Efectul butonului convex apăsat. Exemplul de cod este de mai jos.

Cu această simplă bucată de cod, animația blocului CSS va arăta destul de bine. Se pare foarte interesant și este adesea folosit pe site-uri diferite.

Animație CSS atunci când treceți peste un fragment de site

Cu cât site-ul este mai dinamic și mai modern, cu atât mai mult rămâne utilizatorul. În plus, interactivitatea joacă un rol important. Desigur, acest lucru este adevărat, dar ce poate ajuta site-ul să fie cât mai interactiv posibil?

Arata foarte bine lucrul cu designul elementelor si fragmentelor site-ului atunci cand plasati mouse-ul. Animația butoanelor când se hovering, am dezasamblat deasupra, dar în plus, puteți "reînvia" și tot felul de bucăți ale site-ului, făcându-le cât mai elegante posibil. Ca în orice altceva, principiul principal aici nu este să-l exagerăm.

Deci, există o proprietate excelentă a tranziției, care poate dura până la patru proprietăți conexe.

Într-o anumită perioadă de timp, animația CSS atunci când plasați cursorul pe această bucată de cod se va schimba. Timpul este determinat de proprietatea duratei. Adică, atunci când plasați cursorul peste un element, acesta începe să schimbe în felul propriu o proprietate pe care am cerut-o în selector. Pentru cazul nostru, acesta este elementul (punct înainte). Mai jos este un exemplu de cod, atunci când treceți de la un container div care are o pseudo-clasă de hover, fundalul se schimbă de la roșu la verde.

Când plasați cursorul mouse-ul utilizatorului, animația CSS nu se schimbă imediat, dar cu o întârziere de o fracțiune de secundă, ceea ce creează un efect interesant.

În plus, în cazul în care în exemplul anterior, ați întrebat-o anumită regulă care de fond într-un element de div a fost schimbat de la roșu la verde și circulă în 0,4 secunde, trebuie remarcat faptul că, folosind toate valoare, puteți aplica pentru întreaga proprietate este în întregime imediat.

Exemplul de cod este următorul.

După cum se arată, proprietățile de umplere și fundal vor avea un efect de tranziție, care este determinat de proprietatea de tranziție. Trebuie să rețineți că puteți specifica un anumit set de valori separate prin virgule.

Câteva nuanțe de utilizare a acestui tip de animație pe butoane

În principiu, în general, nu este atât de important în ce ordine aceste valori vor fi indicate și enumerate. Cu excepția cazului. Putem face față proprietății întârziate. În acest caz, trebuie să specificăm durata de timp. Cu alte cuvinte, va trebui să furnizăm în cod cât va avea loc întârzierea de care avem nevoie.

Rețineți însă că unele proprietăți nu pot avea un efect de tranziție. Asta este, ei nu pot fi de tranziție. Acest lucru se datorează faptului că este posibil să nu fie deja animate.

Text animație

Cu ajutorul codului, se poate specifica animație excelentă a textului CSS. Acesta poate fi un articol și un titlu major, titlul site-ului. După cum sa menționat deja mai sus, lucrul principal aici nu este să exagerăm și să nu transformăm site-ul într-un depozit care va arăta ieftin.

Să încercăm să aflăm, ce este animația text CSS, și creați-l și umbrele de text. Poate că ați văzut filme de groază în care numele picturilor în sine păreau să se estompeze pe un fundal închis la culoare. Să încercăm să recreăm ceva similar cu exemplul general.

Animați textul în stilul filmelor de groază

De fapt, chiar ideea este de a face un text în care literele să fie ușor neclare și să se rotească. Trebuie să existe spațiu între litere. Vom folosi umbra inter-scrisoare, precum și un interval. Pentru a implementa ideea, avem nevoie de un script Lettering.js de la autorul lui Dave Rupert. Este nevoie să înfășurați cuvinte plus litere în mai multe etichete de marcare. În primul rând, trebuie să introduceți fraze în eticheta h2. Iată un exemplu de cod.

Apoi, înfășurați toate cuvintele din etichetele h2 din eticheta Span.

Se va întâmpla așa.

Va arăta cam greoaie, dar nu vă stânjeniți de ea.

Obțineți o structură destul de nebună.

Ca rezultat, vom împacheta fiecare dintre literele pe care le avem în eticheta de span. S-au dovedit foarte mult. Dar în codul de mai sus, exemplul este destul de simplist. Puteți scrie singur întreaga structură și va fi ceva mai mare. De asemenea, depinde de textul pe care îl veți folosi.

Finalizați munca noastră cu o mică stilizare. Toate rubricile noastre din exemplul de mai sus vor fi situate în lățimea totală a ecranului. Și vor ocupa aproape tot spațiul liber.

Deoarece vom plasa toate scrisorile noastre în centrul ecranului, pentru containerul nostru avem nevoie și de un flexbox.

Să dăm un exemplu de cod.

Acum am făcut ca toate literele care sunt înfășurate în clasa span, care aparțin clasei părinte .os-phrases, vor fi localizate și vor fi fixate exact în centru.

Nu uitați să adăugați un pic de spațiu liber, adică spațierea între litere.

În acest caz, primul wrapper va avea o anumită proprietate suplimentară. Această proprietate este perspectivă. Ne va permite să facem acest lucru, astfel încât acest site să se evidențieze, așa cum se întâmplă, să vină în prim plan.

Aceleași litere vor fi transparente și vom rula intervalul de animație undeva în 5,2 secunde. Mai jos este un exemplu de cod.

De asemenea, este important să determinăm cum și cu ce întârziere vor apărea ofertele și frazele noastre. Care parte din text va apărea mai repede decât cea anterioară și cât de mult. Codul va arăta astfel.

Vom da un efect mic, dar foarte curios. Setați opacitatea la 0,2. Distanța între litere va fi destul de mare. Literele vor fi, de asemenea, ușor rotite de-a lungul axei Y. Tu, precum și utilizatorii site-ului dvs., veți vedea doar o mică parte din aceste litere. De asemenea, nu uitați să dați efect proprietății text-shadow. Jumătate din animație, vom face un lucru neobișnuit. Vom ascuți literele în sine și, de asemenea, vom reduce distanța care le stă între ele, apoi vom mări opacitatea, iar apoi vom roti semnele la 0 de-a lungul axei Y.

În final, vom adăuga din nou literele dispărute și le vom scala puțin. Acest lucru va da din nou un efect de estompare mic.

Și, în final, ultima frază de animație CSS.

Și da, adăugați în cele din urmă atingerea finală. Vom concentra asupra unor cuvinte specifice. Ei vor avea un semn de grăsime. Acest lucru va da accentul necesar.

Nu uitați de sursele de inspirație

Când încercați să experimentați proprietățile și animațiile CSS, încercați să găsiți inspirații în tot ceea ce se întâmplă în viața de zi cu zi. Poate fi orice, de la o pagină web interesantă până la un efect video deosebit.

În plus, dacă nu te uiți la modul în care se face acest sau acel efect și încerci să-l recreezi singur, poți obține rezultate excelente. Sau, cel puțin, aflați întotdeauna ceva mai mult despre capabilitățile limbajului de programare pe care îl utilizați. Chiar și ideea că nu ați implementat pe deplin poate fi foarte eficientă.